文章目录
👉 前言
在 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)?[...newSet(val.map(item=> item.id))]:[]},// 多选表格asynctoggleSelection(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 =awaitthis.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();}},// 查询表格内容asyncqueryTableList(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;// 通过异步操作，进行勾选awaitthis.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属性 ＞
版权归原作者 技术宅小温 所有， 如有侵权，请联系我们删除。