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);
        }
      }
    },
相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js