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);
              }
            })
          })
相关推荐
正在学习前端的---小方同学4 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
键盘不能没有CV键8 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ8 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python9 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep10 小时前
【前端】前端运行环境的结构
前端
你的人类朋友10 小时前
【Node】认识multer库
前端·javascript·后端
Aitter10 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front10 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'11 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'11 小时前
css `dorp-shadow`
前端·css