【vue】element el-table怎么实现跨页勾选
需求
由后端提供分页接口,每一次翻页el-table的数据都会被刷新一次,这种情况下怎么实现跨页的勾选
代码
html
<el-table
ref="multipleTable"
v-loading="loading"
:data="operationList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
</el-table>
javascript
handleSelectionChange(e) {
if(this.loading) return
for(let listItem of this.operationList){
let eIndex = e.findIndex(item=>item.ic===listItem.ic)
if(eIndex>=0){
//该数据再当页被选中了
let index = this.batchRedeployIds.findIndex(item=>item.id===listItem.id)
if(index<0){
//如果batchRedeployIds中没有该数据则添加上
this.batchRedeployIds.push(listItem)
}
}else{
//该数据在当页没被选中
let index = this.batchRedeployIds.findIndex(item=>item.id===listItem.id)
if(index>=0){
//如果batchRedeployIds中有该数据则需要删除
this.batchRedeployIds.splice(index,1)
}
}
}
},
翻页方法
javascript
getList() {
请求方法(paramsObj)
.then((res) => {
// console.log(res.rows);
if (res.code == '200') {
this.operationList = res.data.records;
this.total = res.data.total;
// this.loading = false;
this.$nextTick(()=>{
for(let listItem of this.operationList){
let index = this.batchRedeployIds.findIndex(item=>item.workOrderId===listItem.workOrderId)
if(index>=0){
this.$nextTick(()=>{
this.$refs.multipleTable.toggleRowSelection(listItem,true)
})
}else{
// this.$refs.multipleTable.toggleRowSelection(listItem,false)
}
}
this.loading=false
})
}
})
.catch(() => {
this.loading = false;
});
},
分析
1.定义了一个batchRedeployIds变量,储存所有被选中的行
2.每次勾选变化时,往batchRedeployIds里添加或删除元素
3.每次分页请求后,回填batchRedeployIds里的选中元素