el-table解决过滤导致选中的丢失的问题
作者：不懂代码的孩子
在使用Element UI的el-table组件时,可能会遇到过滤数据后选中状态丢失的问题,解决这一问题的关键在于利用Vue的计算属性和事件绑定功能,感兴趣的朋友跟随小编一起看看吧
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);
}
}
},到此这篇关于el-table解决过滤导致选中的丢失的文章就介绍到这了,更多相关el-table过滤导致选中的丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！