快捷導(dǎo)航

el-table解決過(guò)濾導(dǎo)致選中的丟失的問(wèn)題

更新時(shí)間：2024年09月09日 09:58:08 作者：不懂代碼的孩子

在使用Element UI的el-table組件時(shí),可能會(huì)遇到過(guò)濾數(shù)據(jù)后選中狀態(tài)丟失的問(wèn)題,解決這一問(wèn)題的關(guān)鍵在于利用Vue的計(jì)算屬性和事件綁定功能,感興趣的朋友跟隨小編一起看看吧

第一步：el-table的設(shè)置

重點(diǎn)是ref="kpiTableRef"，@select="handleSelectKpi"，@select-all="handleSelectKpi"

注意：select和select-all需要對(duì)應(yīng)一個(gè)相同的方法的名稱。

filteredKpiOptions是計(jì)算屬性的來(lái)的。

      <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>

第二步：設(shè)置計(jì)算屬性

待過(guò)濾名稱

     <el-form :inline="true" :model="filterKpiModel">
          <el-form-item label="xx名稱" prop="name">
            <el-input v-model="filterKpiModel.kpiName" placeholder="過(guò)濾xxx名稱" clearable/>
          </el-form-item>
        </el-form>

計(jì)算屬性

- kpiOptions是全部的數(shù)據(jù)
- filteredKpiOptions 是過(guò)濾返回的數(shù)據(jù)

   filteredKpiOptions() {
      // 刷新選中
      this.setKpiSelStatus();
      if (!this.filterKpiModel.kpiName) {
        return this.kpiOptions;
      }
      return this.kpiOptions.filter((data) =>
        data.kpiName.includes(this.filterKpiModel.name)
      );
    }

第三步：設(shè)置選中的數(shù)據(jù)

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

到此這篇關(guān)于el-table解決過(guò)濾導(dǎo)致選中的丟失的文章就介紹到這了,更多相關(guān)el-table過(guò)濾導(dǎo)致選中的丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: