如何实现elementui分页多选和翻页记忆
这篇文章将为大家详细讲解有关如何实现element ui分页多选和翻页记忆，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的霍林郭勒网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
先说需求：实时记录当前选中的分页中的列表，分页保存数据，然后在用选中的数据进行某些操作；PS:左下角的数字为记录的当前选中的列表的和
直接上可用的代码，前提已配置好各种环境
HTML部分
{{multipleSelectionAll.length}}
JS部分
export default {
data(){
return {
tableData: [], // 表格数据
multipleSelectionAll:[],//所有选中的数据包含跨页数据
multipleSelection:[],// 当前页选中的数据
idKey: 'barcode', // 标识列表数据中每一行的唯一键的名称
page:{
//每页数据量
pnum:10,
//数据总数
pageTotal:0,
//当前页，从1开始
currentPage:1,
}
}
},
methods: {
handleCurrentChange(){
this.changePageCoreRecordData();
if(!this.$isNull(this.page.pageTotal)) this.getGoodsList();
},
handleSelectionChange (val) {
this.multipleSelection = val;
//实时记录选中的数据
setTimeout(()=>{
this.changePageCoreRecordData();
}, 50)
},
setSelectRow() {
if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
return;
}
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let selectAllIds = [];
let that = this;
this.multipleSelectionAll.forEach(row=>{
selectAllIds.push(row[idKey]);
})
this.$refs.table.clearSelection();
for(var i = 0; i < this.tableData.length; i++) {
if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
// 设置选中，记住table组件需要使用ref="table"
this.$refs.table.toggleRowSelection(this.tableData[i], true);
}
}
},
// 记忆选择核心方法
changePageCoreRecordData () {
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let that = this;
// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
if (this.multipleSelectionAll.length <= 0) {
this.multipleSelectionAll = this.multipleSelection;
return;
}
// 总选择里面的key集合
let selectAllIds = [];
this.multipleSelectionAll.forEach(row=>{
selectAllIds.push(row[idKey]);
})
let selectIds = []
// 获取当前页选中的id
this.multipleSelection.forEach(row=>{
selectIds.push(row[idKey]);
// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
if (selectAllIds.indexOf(row[idKey]) < 0) {
that.multipleSelectionAll.push(row);
}
})
let noSelectIds = [];
// 得到当前页没有选中的id
this.tableData.forEach(row=>{
if (selectIds.indexOf(row[idKey]) < 0) {
noSelectIds.push(row[idKey]);
}
})
noSelectIds.forEach(id=>{
if (selectAllIds.indexOf(id) >= 0) {
for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
if (that.multipleSelectionAll[i][idKey] == id) {
// 如果总选择中有未被选中的，那么就删除这条
that.multipleSelectionAll.splice(i, 1);
break;
}
}
}
})
},
//请求接口部分
getGoodsList(){
let data = {};
data['page'] = this.page.currentPage;
data['pnum'] = this.page.pnum;
this.$ajax({
url:'goods/list',
data:data
}).then(val => {
this.tableData = val.data.rows ? val.data.rows : [];
this.page = {
pnum:10,
pageTotal:val.data.total,
currentPage:val.data.page,
};
setTimeout(()=>{
this.setSelectRow();
}, 50)
})
}
},
created () {
this.getGoodsList()
}
}关于“如何实现element ui分页多选和翻页记忆”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
文章题目：如何实现elementui分页多选和翻页记忆
分享URL：
http://cdxtjz.cn/article/isjedi.html
