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);
        }
      }
    },
相关推荐
excel7 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着7 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友9 小时前
什么是API签名?
前端·后端·安全
会豪11 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子11 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶11 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子11 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_11 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233311 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin11 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js