【vue】element el-table怎么实现跨页勾选

本文主要是介绍【vue】element el-table怎么实现跨页勾选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【vue】element el-table怎么实现跨页勾选

需求

由后端提供分页接口，每一次翻页el-table的数据都会被刷新一次，这种情况下怎么实现跨页的勾选

代码

<el-tableref="multipleTable"v-loading="loading":data="operationList"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"> </el-table-column>
</el-table>

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)}}}},

翻页方法

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;});},