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

简单点了2024-09-06 5:02

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);
        }
      }
    },