<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="page"
:page-sizes="[10]"
:page-size="limit"
layout="total, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
export default{
data(){
page: 1, // 分页 页数
limit: 10, // 分页 当前条数
total: null, //分页 总条数
tableList: [], // 分页数据
tableData:{itemList:[]}, // 页面总数据
},
async created(){
await this.init()
},
methods:{
// 获取总数据
async init(){
this.tableData.itemList = await XXXX();
this.getList()
},
// 分页处理数据
getList() {
this.tableList = this.tableData.itemList.filter((item, index) => {
return index < this.page * this.limit && index >= this.limit * (this.page - 1)
})
this.total = this.tableData.itemList.length
},
// 当每页数量改变
handleSizeChange(val) {
console.log(`每页${val}条`);
this.limit = val
this.getList()
},
// 当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},
// 删除某一行数据后
deletes(params){
// 根据 params 里的 某个找到 总数据的那一条
let index = this.tableData.itemList.findeIndex(item=> item.id ===params.id )
if(index > -1){
this.tableData.itemList.splice(index,1)
}
}
/**
* 判断 总条数 是否可以是10的倍数,得到页数 不然会出现bug
*/
if(this.tableData.itemList.length % 10 === 0){
this.page = this.tableData.itemList.length / 10 === 0 ? 1 : this.tableData.itemList.length / 10
}
this.getList();
}
}
element 前端分页及删除某条数据
最新推荐文章于 2022-12-29 18:51:32 发布