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);
              }
            })
          })
相关推荐
文心快码BaiduComate18 分钟前
从个人效能到组织资产:文心快码企业版Agent Hub上线,提升团队AI编程效能
前端·后端·程序员
想不到ID了32 分钟前
第八篇: 登录注册功能实现
java·javascript
咖啡星人k33 分钟前
从需求到交付:我用MonkeyCode的AI Agent完成了一个React数据看板
前端·人工智能·react.js·monkeycode
sxlishaobin35 分钟前
linux 自动清除日志 脚本
linux·服务器·前端
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_37:(从文档流到粘性定位的底层原理)
前端·javascript·css·ui·html
十九画生1 小时前
从“会用函数”到“理解函数”:JavaScript 中函数为什么也是对象?
javascript
IccBoY1 小时前
NVM超详细全解教程:解决Node版本冲突(Win/Mac/Linux安装+使用+踩坑合集)
前端·node.js
wuhen_n1 小时前
前端工程师进阶提示词工程实战
前端·langchain·ai编程
GISer_Jing1 小时前
Claude Code MCP Server 集成全解析
前端·人工智能·ai·架构
蚰蜒螟1 小时前
走进 Linux 内核:从 touch 命令到磁盘 inode 的完整旅程
java·linux·前端