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);
        }
      }
    },
相关推荐
晴殇i6 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟10 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览14 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少16 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z27 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z30 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog31 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构35 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙42 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1143 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter