课程章节:7-2 用户列表分页展示1
课程讲师: Sunday
课程内容:
目标:用户列表的分页展示
核心点:通过用户管理的模块分析,将用户列表的每个功能实现出来整合成一个页面
用户列表分页展示 功能,整个功能大体可以分为两步:
- 获取分页数据
- 利用 el-table 和 el-pagination 渲染数据
实现过程:
- 创建 api/user-manage 文件,用于定义接口
import request from '@/utils/request'
/**
1. 获取用户列表数据
*/
export const getUserManageList = data => {
return request({
url: '/user-manage/list',
params: data
})
}
- 在 user-manage 中获取对应数据
<script setup>
import { ref } from 'vue'
import { getUserManageList } from '@/api/user-manage'
import { watchSwitchLang } from '@/utils/i18n'
// 数据相关
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(2)
// 获取数据的方法
const getListData = async () => {
const result = await getUserManageList({
page: page.value,
size: size.value
})
tableData.value = result.list
total.value = result.total
}
getListData()
// 监听语言切换
watchSwitchLang(getListData)
</script>
- 根据数据利用 el-table 和 el-pagination 渲染视图
<template>
<div class="user-manage-container">
<el-card class="header">
<div>
<el-button type="primary"> {{ $t('msg.excel.importExcel') }}</el-button>
<el-button type="success">
{{ $t('msg.excel.exportExcel') }}
</el-button>
</div>
</el-card>
<el-card>
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="#" type="index" />
<el-table-column prop="username" :label="$t('msg.excel.name')">
</el-table-column>
<el-table-column prop="mobile" :label="$t('msg.excel.mobile')">
</el-table-column>
<el-table-column :label="$t('msg.excel.avatar')" align="center">
<template v-slot="{ row }">
<el-image
class="avatar"
:src="row.avatar"
:preview-src-list="[row.avatar]"
></el-image>
</template>
</el-table-column>
<el-table-column :label="$t('msg.excel.role')">
<template #default="{ row }">
<div v-if="row.role && row.role.length > 0">
<el-tag v-for="item in row.role" :key="item.id" size="mini">{{
item.title
}}</el-tag>
</div>
<div v-else>
<el-tag size="mini">{{ $t('msg.excel.defaultRole') }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="openTime" :label="$t('msg.excel.openTime')">
</el-table-column>
<el-table-column
:label="$t('msg.excel.action')"
fixed="right"
width="260"
>
<template #default>
<el-button type="primary" size="mini">{{
$t('msg.excel.show')
}}</el-button>
<el-button type="info" size="mini">{{
$t('msg.excel.showRole')
}}</el-button>
<el-button type="danger" size="mini">{{
$t('msg.excel.remove')
}}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[2, 5, 10, 20]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { getUserManageList } from '@/api/user-manage'
import { watchSwitchLang } from '@/utils/i18n'
// 数据相关
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(2)
// 获取数据的方法
const getListData = async () => {
const result = await getUserManageList({
page: page.value,
size: size.value
})
tableData.value = result.list
total.value = result.total
}
getListData()
// 监听语言切换
watchSwitchLang(getListData)
// 分页相关
/**
* size 改变触发
*/
const handleSizeChange = currentSize => {
size.value = currentSize
getListData()
}
/**
* 页码改变触发
*/
const handleCurrentChange = currentPage => {
page.value = currentPage
getListData()
}
</script>
<style lang="scss" scoped>
.user-manage-container {
.header {
margin-bottom: 22px;
text-align: right;
}
::v-deep .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
::v-deep .el-tag {
margin-right: 6px;
}
.pagination {
margin-top: 20px;
text-align: center;
}
}
</style>
课程收获:
谢谢老师,讲的通俗易懂,引导我们一步步去做。这一节主要是实战课,实现用户管理部分整个页面,通过一步步的实现发现,其中表格的一些渲染方法有些小细节挺重要的,要注意如果是没有直接的prop的写法,里面的插槽如何去判断和渲染的方法。希望在接下来的课程中能更多的学习到这种实用的工作中经常用到的写法。
课程截图:
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦