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