el-table解决过滤导致选中的丢失

el-table解决过滤导致选中的丢失

场景:

当前选中了A,B,C,D四条数据,我现在想找出Z这条数据,过滤之后,ABCD就是不可见,但是我还是选中了,此时选中Z之后ABCD就选中不了了,此时我们需要选中ABCD并且选中Z。

第一步:el-table的设置

重点是ref="kpiTableRef",@select="handleSelectKpi",@select-all="handleSelectKpi"

注意:select和select-all需要对应一个相同的方法的名称。

复制代码
filteredKpiOptions是计算属性的来的。
复制代码
      <el-table
        ref="kpiTableRef"
        style="margin: 0 10px 0 0"
        :data="filteredKpiOptions"
        :height="450"
        v-loading="kpiTableLoading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-row
        @select="handleSelectKpi"
        @select-all="handleSelectKpi"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="name"
          label="xxx名称"
          :show-overflow-tooltip="true"
        />

</el-table>

第二步:设置计算属性

待过滤名称

复制代码
     <el-form :inline="true" :model="filterKpiModel">
          <el-form-item label="xx名称" prop="name">
            <el-input v-model="filterKpiModel.kpiName" placeholder="过滤xxx名称" clearable/>
          </el-form-item>
        </el-form>

计算属性

    • kpiOptions是全部的数据
    • filteredKpiOptions 是过滤返回的数据

      filteredKpiOptions() {
      // 刷新选中
      this.setKpiSelStatus();
      if (!this.filterKpiModel.kpiName) {
      return this.kpiOptions;
      }
      return this.kpiOptions.filter((data) =>
      data.kpiName.includes(this.filterKpiModel.name)
      );
      }

第三步:设置选中的数据

复制代码
    setKpiSelStatus() {
      const vm = this;
      let currentKpiIds = [];
      for (let selKpi of vm.selKpiList) {
        if (!currentKpiIds.includes(selKpi.kpiId)) {
          currentKpiIds.push(selKpi.kpiId);
        }
      }
      for (let kpi of vm.kpiOptions) {
        vm.$set(kpi, 'kpiId', kpi.id);
        if (currentKpiIds.includes(kpi.id)) {
          vm.$set(kpi, 'isCheck', true);
          vm.$nextTick(() => {
            vm.$refs.kpiTableRef.toggleRowSelection(kpi, true);
          });
        } else {
          vm.$set(kpi, 'isCheck', false);
        }
      }
    },
相关推荐
文心快码BaiduComate8 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger8 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98114 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐21 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手27 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy31 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy37 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵38 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js