👉 前言

在 Vue + elementUi 开发中，elementUI中表格在本身是自带多选功能的，但是在某些情况下，并不能完全适用，甚至可能产生bug。例如本次案例所遇Bug，情景如下：

本案例场景：在表单中，通过表单参数筛选某个明细表格数据，后端要求新增时可多选明细表格中的内容。但由于明细列表存在分页的功能，在回显时，由于element表格提供的勾选函数（toggleRowSelection(cur, true)），因为数据不全面，只勾选了当前分页的内容。

且由于业务需要，通常在表格中多选方法中都会存储勾选的ID或其他数据的逻辑，这就导致第一次回显勾选的数据，因分页数据导致只勾选当前页中包含的明细，然后触发多选方法，覆盖了回显的数据，导致数据丢失！

接下来，简单阐述下，开发中使用的解决方法！方法并不适用，只提供解决思路，具体问题具体分析！仅供参考！

👉 一、解决思路

遇到这种问题，一般的思路是创建一个中间变量来暂存勾选的内容，但是由于业务复杂度问题，需要在前端切换业务域时，通过本地存储暂存当前相关数据，导致回显时，要考虑的逻辑较多，就排除了再新增变量存储的问题，而且也容易存错，导致二次数据覆盖！

回到问题本身，可以看得出来，是由于分页功能导致的数据回显时，勾选不全的问题。所以就这个问题，与后端沟通，添加 usePage参数，区分是否使用分页，在回显勾选内容的方法内调用，当然这种是基于数据量少的地方才能用，而且需要使用loading，避免长时间加载，导致用户以为页面卡死没数据的情况。

👉 二、实现代码（仅供参考，具体问题具体分析）

> HTML模板

<el-tableref="multipleTable":data="tableData"tooltip-effect="light":height="tableHeight":max-height="tableHeight":key="formData.ssywy + tableOption.length"style="width: 100%"v-loading="tableLoading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"row-key="id"@selection-change="handleSelectionChange($event)"
><el-table-columntype="selection"width="55"reserve-selectionfixed="left"align="center"></el-table-column>
</el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="params.current":page-sizes="[10, 50, 100, 200]":page-size="params.size"backgroundlayout="prev, pager, next, sizes, jumper, total":total="params.total"
></el-pagination>

> Js模板

// 明细列表多选
handleSelectionChange(val) {this.multipleSelection = val// window.console.log(this.formData.ywyAndRuleDTO, this.multipleSelection, val)this.formData.ywyAndRuleDTO[this.formData.ssywy].defectIds = Array.isArray(val) ? [...new Set(val.map(item => item.id))] : []
},
// 多选表格
async toggleSelection(v) {// window.console.log(this.formData.ywyAndRuleDTO, v, this.tableData)if (v.length !== 0) {let params = {...this.params,ruleIds: this.formData.ywyAndRuleDTO[this.formData.ssywy].ruleIds.map(item => item.id),ywy: this.formData.ssywy,zrdwIds: this.formData.beCheckUnitIds.split(','),flag: this.formData.execStatus != undefined ? false : true,mark: 'export'};let rs = await this.riskReVerifyCheckDefectList(params)this.$refs["multipleTable"].clearSelection();this.tableData = rs.rows || [];v.forEach((item) => {let cur = this.tableData.find((item_1) => {return item === item_1.id;})if(cur) {this.$refs["multipleTable"].toggleRowSelection(cur, true);}});} else {this.$refs["multipleTable"].clearSelection();}
},
// 查询表格内容
async queryTableList(reset) {if (reset) {this.setPages();}let params = {...this.params,ruleIds: this.formData.ywyAndRuleDTO[this.formData.ssywy].ruleIds.map(item => item.id),ywy: this.formData.ssywy,zrdwIds: this.formData.beCheckUnitIds.split(','),flag: this.formData.execStatus != undefined ? false : true};this.formData.ywyAndRuleDTO[this.formData.ssywy].selectDTO = JSON.parse(JSON.stringify(params))this.tableData = [];if(!this.formData.ssywy || Array.isArray(this.formData.ywyAndRuleDTO[this.formData.ssywy].ruleIds) && this.formData.ywyAndRuleDTO[this.formData.ssywy].ruleIds.length === 0) {this.$message.warning('请先勾选对应业务域的规则信息！')return}this.tableLoading = true;// 通过异步操作，进行勾选await this.toggleSelection(this.formData.ywyAndRuleDTO[this.formData.ssywy].defectIds)this.riskReVerifyCheckDefectList(params).then((rs) => {if (rs && Array.isArray(rs.rows) && rs.rows.length !== 0) {this.tableData = rs.rows;this.setPages(rs.current, rs.size, rs.records);} else {this.tableData = [];this.setPages();}}).finally(() => {this.tableLoading = false;});
},

案例较为粗浅，仅供参考！ 若有大佬有更好的解决方案，希望大佬们赐教！ 目前暂时还没想出比较简洁的办法！ 该解决方案并不成熟，仅以抛砖引玉！

往期内容 💨

🔥 ＜ 每日闲谈：你真的了解 “ ChatGPT ” 嘛 ？ ＞

🔥 ＜ 每日算法 - JavaScript解析：搜索旋转排序数组 ＞

🔥 ＜ CSS小技巧：类似photoShop的混合模式（mix-blend-mode / background-blend-mode）使用 ＞

🔥 ＜开源： 推荐10个开源的前端低代码项目＞

🔥 ＜ CSS小技巧：那些不常用，却很惊艳的CSS属性 ＞

QQ个性签名网