elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变

业务需求:

点击查询弹列表框

勾选列表选项保存

可删除可重新查询列表添加

遇到的问题:删除之后查询列表selection回显问题

解决:@row-click配合:reserve-selection="true"使用

复制代码
      <el-table
        ref="refPlanTable"
        :data="refPlanTableData"
        tooltip-effect="dark"
        :max-height="400"
        :height="400"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{textAlign:'center'}"
        @selection-change="handleSelectionChangeRef"
        @row-click="handleRowClickRef"
        :row-key="getRowKey"
      >
        <el-table-column type="selection" width="55" fixed="left" :reserve-selection="true"></el-table-column>
        </el-table>

handleRowClickRef(row){ this.$refs.refPlanTable.toggleRowSelection(row); },

表格data赋值的地方添加

注意::reserve-selection="true"会记录保存上一次选中的状态,所以每次赋值前要先清空选中状态

复制代码
          this.refPlanTableData=res.result;
          let string = this.multipleSelectionRef.map(item => item.identity);
          console.log(string);
          this.$nextTick(() => {
            this.refPlanTableData.forEach(item=>{
              this.$refs.refPlanTable&&this.$refs.refPlanTable.toggleRowSelection(item,false);
              if(string.includes(item.identity)){
                this.$refs.refPlanTable&&this.$refs.refPlanTable.toggleRowSelection(item,true);
              }
            })
          })
相关推荐
DanCheOo3 分钟前
AI 应用的安全架构:Prompt 注入、数据泄露、权限边界
前端·人工智能·prompt·安全架构
We་ct1 小时前
深度剖析浏览器跨域问题
开发语言·前端·浏览器·跨域·cors·同源·浏览器跨域
weixin_427771611 小时前
前端调试隐藏元素
前端
threelab2 小时前
Three.js 代码云效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
爱上好庆祝2 小时前
学习js的第五天
前端·css·学习·html·css3·js
C澒3 小时前
IntelliPro 产研协作平台:基于 AI Agent 的低代码智能化配置方案设计与实现
前端·低代码·ai编程
一袋米扛几楼983 小时前
【Git】规范化协作:详解 GitHub 工作流中的 Issue、Branch 与 Pull Request 最佳实践
前端·git·github·issue
网络点点滴3 小时前
前端与后端的区别与联系
前端
yqcoder3 小时前
JavaScript 柯里化:把“大餐”拆成“小炒”的艺术
开发语言·javascript·ecmascript
每天吃饭的羊3 小时前
JSZip的使用
开发语言·javascript