背景： 迫切需要实现当前页勾选列表数据，点击下一页还能继续选中数据的跨页选中功能
实现思路分析：
1. 获取当前页面勾选的数据multipleSelection
2. 缓存所有选中的数据包含跨页数据 multipleSelectionAll
3. 当multipleSelectionAll 没有数据时 multipleSelectionAll = multipleSelection 返回
4.multipleSelectionAll 有数据， 把当前页选中数据 multipleSelection 添加到 multipleSelectionAll 中
5. 获取当前页没有选中的数据 ， 判断有在multipleSelectionAll 中就从multipleSelectionAll 中删除
实现过程
1 // tabel 列配置 复选框配置 :reserve-selection="true"
表格配置 :row-key="getRowKeys"
<el-table-column v-if="!excludeComponent.includes(componentName)"
type="selection"
:reserve-selection="true"
width="55">
</el-table-column>
2. vue data 里定义数据
idKey: 'goodsId', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
multipleSelection: [],
multipleSelectionAll:[],//所有选中的数据包含跨页数据
3. methods: 里定义方法
getRowKeys (row) {
return row.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.multipleTable.clearSelection();
for(var i = 0; i < this.gridDatas.length; i++) {
if (selectAllIds.indexOf(this.gridDatas[i][idKey]) >= 0) {
// 设置选中，记住table组件需要使用ref="table"
this.$refs.multipleTable.toggleRowSelection(this.gridDatas[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]);
})
console.log(this.multipleSelectionAll)
console.log(selectAllIds)
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.gridDatas.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;
}
}
}
})
},
// 获取勾选数据
handleSelectionChange(val){
this.multipleSelection = val;
console.log('multipleSelection', val)
this.changePageCoreRecordData();
},
4. html中
<theme-table v-if="height" ref="multipleTable" componentName="uploadApprove" @onClick="onClick" @handleSelectionChange="handleSelectionChange" :height="height" @getTableData="getTableData" @handleCurrentChange="handleCurrentChange"></theme-table>
这里表格封装了一层
element-ui——解决el-table表格组件出现选择一行而全选框也被打上勾的问题
------解决方案：给row-key值绑定一个唯一值
参考文献： https://www.cnblogs.com/anjing940/p/10207283.html
网友评论