<el-table
:data="tableData"
border
ref="multipleTableChannel"
@selection-change="selectChannel"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50"
align="center"
label="序号"/>
<el-table-column
prop="date"
align="center"
label="商户名称">
</el-table-column>
<el-table-column
prop="name"
align="center"
label="联系人">
</el-table-column>
<el-table-column
prop="address"
align="center"
label="联系电话">
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
layout="total,prev, pager, next"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
multipleSelection: [], // 当前页选中的数据
idKey: 'id', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
// 设置选中的方法
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"
console.log(this.tableData[i])
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;
}
}
}
})
console.log(that.multipleSelectionAll)
},
handleCurrentChange(val){
// 改变页的时候调用一次
this.page.currentPage = val;
this.changePageCoreRecordData();
this.query();
},
handleSelectionChange1 (val) {
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
this.multipleSelection = val;
},
query () {
// 分页查询数据方法，在成功返回数据方法里调用setSelectRow方法，使每次分页查询都能勾选中
if(this.page.currentPage==1){
this.tableData=this.tableDatsa
}else{
this.tableData=this.datass
}
setTimeout(()=>{
this.setSelectRow();
}, 200)
},
