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);
        }
      }
    },
相关推荐
Boilermaker19929 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子20 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102435 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构