本文主要是介绍【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;});},
分析
1.定义了一个batchRedeployIds变量，储存所有被选中的行
2.每次勾选变化时，往batchRedeployIds里添加或删除元素
3.每次分页请求后，回填batchRedeployIds里的选中元素
这篇关于【vue】element el-table怎么实现跨页勾选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
