代码:
<template>
<div class="setting">
<el-card>
<el-tabs>
<el-tab-pane label="角色管理">
<el-button type="primary" size="small">+新增角色</el-button>
<el-table :data="list">
<!-- 数据绑定data -->
<!-- label表示标题 -->
<!-- prop='对应的字段名' -->
<!-- 自定义列 -->
<!-- <template>
<div v-slot="{$index:索引}:row:当前行数据">
</div>
</template> -->
<el-table-column label="序号" type="index">
<template v-slot="{ $index }">
<div>
{
{ (page.page - 1) * page.pagesize + $index + 1 }}
</div>
</template>
</el-table-column>
<el-table-column label="角色名" prop="name" />
<el-table-column label="描述" prop="description" />
<el-table-column label="操作">
<template>
<div>
<el-button type="text">分配权限</el-button>
<el-button type="text">修改</el-button>
<el-button type="text">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="page">
<!-- current-page当前页 -->
<!-- page-sizes 页容量 默认页容量一定要在页容量中存在-->
<!-- layout布局 -->
<el-pagination
style="text-align: right"
:current-page="page.page"
:page-sizes="[1, 10, 100, 200, 300, 400]"
:page-size="page.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</el-tab-pane>
<el-tab-pane label="公司信息" />
</el-tabs>
</el-card>
</div>
</template>
<script>
import { sysRole } from '@/api/setting.js'
export default {
name: '',
data() {
return {
list: [],
page: {
page: 1, // 默认页码
pagesize: 10, // 每页条数
total: 100
}
}
},
created() {
this.getData()
},
methods: {
// 页容量改变
handleSizeChange(size) {
this.page.pagesize = size
// 页容量回到第一页
this.page.page = 1
this.getData()
console.log(size)
},
// 页码改变
handleCurrentChange(page) {
this.page.page = page
this.getData()
console.log(page)
},
// 获取列表
async getData() {
const res = await sysRole(this.page)
// 存储分页总数
this.page.total = res.data.total
// 存储列表数据
this.list = res.data.rows
console.log(res, '角色列表')
}
}
}
</script>
<style scoped></style>
代码逻辑的分析:
1.导入接口
import { sysRole } from '@/api/setting.js'
2.默认请求第1页,每页10条数据
list: [],
page: {
page: 1, // 默认页码
pagesize: 10, // 每页条数
total: 100
}
3.请求总体列表的数据
// 获取列表
async getData() {
const res = await sysRole(this.page)
// 存储分页总数
this.page.total = res.data.total
// 存储列表数据
this.list = res.data.rows
console.log(res, '角色列表')
}
4.进来就调用
created() {
this.getData()
},
假设数据有60条
5.页容量发生改变时候
修改页容量
handleSizeChange(size) {
this.page.pagesize = size
// 页容量回到第一页
this.page.page = 1
this.getData()
console.log(size)
},
假设改变的页容量是1
那么此时:
改变页容量后最好回到第一页,在继续刷新列表。
// 页容量回到第一页
this.page.page = 1
否则可能会出现bug
6.页码发生改变
// 页码改变
handleCurrentChange(page) {
this.page.page = page
this.getData()
console.log(page)
},
直接将改变的页码重新赋值。
this.page.page = page
刷新列表的数据。
this.getData()