ElementUI 前端分页的实现
请求得到的数据
官方文档给的有,最主要的是el-table里面展示的数据怎么处理
通过 :data
来绑定数据实现分页 userList就是获取到的数据
User.vue
<!--表格区域-->
<el-table style="width: 100%" :data="userList.slice((currentPage-1)*pageSize,currentPage*pageSize)" border>
<el-table-column label="#" width="60" prop="id">
</el-table-column>
<el-table-column label="姓名" prop="name">
</el-table-column>
<el-table-column label="邮箱" prop="email">
</el-table-column>
<el-table-column label="电话" prop="tel">
</el-table-column>
<el-table-column label="状态" prop="mg_state">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userChangeStatused(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!--编辑按钮-->
<el-button type="primary" icon="el-icon-edit" :modal="scope" size="small" circle></el-button>
<!--删除按钮-->
<el-button type="danger" icon="el-icon-delete" size="small" circle></el-button>
<!--分配角色按钮-->
<el-tooltip class="item" effect="dark" :content="'为'+ scope.row.name + '分配角色'" :enterable="false" placement="top">
<el-button type="warning" icon="el-icon-setting" size="small" circle></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 2, 5, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="parseInt(total)">
</el-pagination>
</el-card>
<script>
export default {
created() {
this.getUserList()
},
data() {
return {
userList: [],
// 分页用到的数据
currentPage: 1,
pageSize: 1,
total: 0
}
},
methods: {
//发送请求拿到数据
async getUserList() {
const { data: res } = await this.$axios.get('/users')
this.userList = res.data
this.total = this.userList.length
console.log(this.userList)
},
handleSizeChange(newSize) {
// pagesize改变触发
this.pageSize = newSize
},
handleCurrentChange(newPage) {
// 页码改变触发
this.currentPage = newPage
}
}
}
</script>
<style lang="less" scoped>
</style>
路过,借鉴一下你博客的布局
test OωO
路过了