ElementUI分页功能
<template>
<div>
<h2>用户列表</h2>
<el-table style="width: 100%" stripe border highlight-current-row :data="userList" >
<el-table-column align="center" prop="id" label="员工编号" ></el-table-column>
<el-table-column align="center" prop="name" label="员工姓名"></el-table-column>
<el-table-column align="center" prop="sex" label="员工性别"></el-table-column>
<el-table-column align="center" prop="age" label="员工年龄"></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit()">编辑</el-button> <!--当前行的对象-->
<el-button size="mini" type="danger" @click="handleDelete()">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
hide-on-single-page 当数据只有一页时,自动隐藏分页菜单
@size-change="handleSizeChange" 当每页显示的数据数目发生改变生的动作,需要按新的pageSize查询数据
@current-change="handleCurrentChange" 当改变当前页时产生的动作
:current-page="pageNo" 绑定当前页
:page-sizes="[5, 10, 30, 50]" 显示pageSize的选项
:page-size="pageSize" 绑定当前页数
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"> 绑定当前总数
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "userList",
data(){
return{
userList:[],
pageNo:1, // 默认当前是第一页
pageSize:5, // 当前每页的数据是5条
totalCount:0 // 总数默认为0
}
},
mounted() { // 页面加载之前执行的函数
this.getCount(); // 获取当前数据的总数
this.getList(); // 按当前的页号和每页的数据量进行查询
},
methods:{
getCount(){
this.axios.post("/getCount").then(res=>{
this.totalCount = res.data;
})
},
getList(){
let params = new FormData();
params.append("pageNo",this.pageNo);
params.append("pageSize",this.pageSize);
this.axios.post("/getUserList",params).then(res=>{
this.userList = res.data;
})
},
handleEdit(row){ // 对该行数据进行更新
this.$router.push({
name:'update',
params:{user:row}
})
},
handleDelete(row){ // 对改行数据进行删除
let params = new FormData();
params.append("id",row.id);
this.axios.post("/delete",params).then(res=>{
if(res.data=="ok"){
this.$notify.success({"title":"删除结果","message":"成功"});
this.getCount();
this.getList();
}else {
this.$notify.error({"title":"删除结果","message":"失败"});
}
})
},
handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
this.pageSize = val; // 修改页的大小
this.getList(); // 按新的pageNo和pageSize进行查询
},
handleCurrentChange(val) { // 修改当前页所触发的函数
this.pageNo = val; // 更新当前的页
this.getList(); // 按新的pageNo和pageSize进行查询
}
}
}
</script>
<style scoped>
</style>