问题描述:我们在用elementUI 的el-table的可勾选功能时候,常常遇到表格跳页后无法记录之前勾选信息,啥也不说了,直接上代码
<template>
<el-table
ref="table_dataSet"
height="100%"
:stripe="true"
border
element-loading-text="正在加载,请稍后..."
element-loading-spinner="el-icon-loading"
element-loading-background="#fff"
:data="arr"
size="small"
:header-cell-style="{background: '#F5F7FA'}"
style="width: 100%"
@selection-change="handleSelectionChange"
@select="selectionChange"
@select-all="selectAll">
</el-table>
</template>
<script>
export default {
data() {
return {
arr:[],//接口回来的数据
multipleSelection:[]
}
},
methods:{
selectionChange(e, row){
var select = e.length && e.indexOf(row) != -1
if (select) {
var arr = [...this.multipleSelection,...e];
this.multipleSelection =
[...new Set(arr.map(t =>JSON.stringify(t)))].map(s => JSON.parse(s));
} else {
for (var i = this.multipleSelection.length - 1; i >= 0; i--) {
if(this.multipleSelection[i].USER_ID == row.USER_ID){
this.multipleSelection.splice(i,1);
}
}
}
console.log("this.multipleSelection",this.multipleSelection)
},
selectAll(e){
if (e.length) {
var arr = [...this.multipleSelection,...e];
this.multipleSelection =
[...new Set(arr.map(t => JSON.stringify(t)))].map(s =>JSON.parse(s));
} else {
if (this.multipleSelection.length) {
var data = []
this.multipleSelection.map((item,i) =>{
if(!this.arr.find(val => val.USER_ID == item.USER_ID)){
data.push(this.multipleSelection[i])
}
})
this.multipleSelection = data;
} else {
this.multipleSelection = []
}
}
},
getArr() {//接口回来的数据
//请求接口在成功的回调里
this.$nextTick(() => {
if (this.multipleSelection.length) {
this.multipleSelection.forEach((row,i) => {
this.arr.forEach((item,j) => {
if (row.USER_ID == item.USER_ID) {
this.$refs.table_dataSet.toggleRowSelection(item,true);
console.log("this.multipleSelection",item)
}
})
});
}
})
}
}
}