vue3+ts

最新推荐文章于 2024-06-27 09:25:10 发布

龚俊唯爱zzh

最新推荐文章于 2024-06-27 09:25:10 发布

阅读量518

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_53797275/article/details/130495982

该代码片段展示了一个基于Vue.js的用户管理界面，包括用户列表、新建、编辑和删除功能。使用了Pinia进行状态管理，El-Table组件展示数据，并根据权限控制显示不同操作按钮。同时，实现了分页和网络请求来获取及更新用户数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-button v-if="isCreate" type="primary" @click="handleNewUserClick"

>新建用户</el-button

</div>

<el-table :data="usersList" border style="width: 100%">

<el-table-column align="center" type="selection" width="60px" />

<el-table-column

align="center"

type="index"

label="序号"

width="60px"

<el-table-column

align="center"

label="用户名"

prop="name"

width="150px"

<el-table-column

align="center"

label="真实姓名"

prop="realname"

width="150px"

<el-table-column

align="center"

label="手机号码"

prop="cellphone"

width="150px"

<el-table-column

align="center"

label="状态"

prop="enable"

width="100px"

<el-button

size="small"

:type="scope.row.enable ? 'primary' : 'danger'"

plain

</el-button>

</template>

</el-table-column>

<el-table-column align="center" label="创建时间" prop="createAt">

</template>

</el-table-column>

<el-table-column align="center" label="更新时间" prop="updateAt">

</template>

</el-table-column>

<el-table-column align="center" label="操作" width="150px">

<el-button

v-if="isUpdate"

size="small"

icon="Edit"

type="primary"

text

@click="handleEditBtnClick(scope.row)"

编辑

</el-button>

<el-button

v-if="isDelete"

size="small"

icon="Delete"

type="danger"

text

@click="handleDeleteBtnClick(scope.row.id)"

删除

</el-button>

</template>

</el-table-column>

</el-table>

</div>

<el-pagination

v-model:current-page="currentPage"

v-model:page-size="pageSize"

:page-sizes="[10, 20, 30]"

layout="total, sizes, prev, pager, next, jumper"

:total="usersTotalCount"

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

</div>

</template>

import { storeToRefs } from 'pinia'

import useSystemStore from '@/store/main/system/system'

import { formatUTC } from '@/utils/format'

import { ref } from 'vue'

import usePermissions from '@/hooks/usePermissions'

// 定义事件

const emit = defineEmits(['newClick', 'editClick'])

// 用户的权限判断

const isCreate = usePermissions('users:create')

const isDelete = usePermissions('users:delete')

const isUpdate = usePermissions('users:delete')

const isQuery = usePermissions('users:query')

// 1.发起action，请求usersList的数据

const systemStore = useSystemStore()

const currentPage = ref(1)

const pageSize = ref(10)

fetchUserListData()

// 2.获取usersList数据,进行展示

const { usersList, usersTotalCount } = storeToRefs(systemStore)

// 3.页码相关的逻辑

function handleSizeChange() {

fetchUserListData()

}

function handleCurrentChange() {

fetchUserListData()

}

// 4.定义函数, 用于发送网络请求

function fetchUserListData(formData: any = {}) {

if (!isQuery) return

// 1.获取offset/size

const size = pageSize.value

const offset = (currentPage.value - 1) * size

const pageInfo = { size, offset }

// 2.发起网络请求

const queryInfo = { ...pageInfo, ...formData }

systemStore.postUsersListAction(queryInfo)

}

// 5.删除/新建/编辑的操作

function handleDeleteBtnClick(id: number) {

systemStore.deleteUserByIdAction(id)

}

function handleNewUserClick() {

emit('newClick')

}

function handleEditBtnClick(itemData: any) {

emit('editClick', itemData)

}

defineExpose({ fetchUserListData })

</script>

.content {

margin-top: 20px;

padding: 20px;

background-color: #fff;

}

.header {

display: flex;

justify-content: space-between;

align-items: flex-end;

margin-bottom: 10px;

.title {

font-size: 22px;

}

.table {

:deep(.el-table__cell) {

padding: 12px 0;

}

.el-button {

margin-left: 0;

padding: 5px 8px;

}

.pagination {

display: flex;

justify-content: flex-end;

margin-top: 10px;

}

</style>