Ant Design of Vue 1.7.8 版本不支持选择子级点亮父级以及选择父级点亮子级;
效果图:
这里我用到的是选中:sfelectedRowKeys = [];
以及function onSelect();
<a-table :columns="columnsSelect" :data-source="tableData" :row-selection="{
selectedRowKeys: sfelectedRowKeys,
onChange: onSelectChanges,
getCheckboxProps: getCheckboxProps,
onSelect: onSelect,
onSelectAll: onSelectAll,
onSelectInvert: onSelectInvert,
}" :expanded-row-keys.sync="expandedRowKeys" :rowKey="record => record.id" :scroll="{ x: 500, y: 700 }">
<template slot="name" slot-scope="record">
<div style="white-space: nowrap;">
{{ record }}
</div>
</template>
</a-table>
因为我写的时候dom结构没刷新导致选中没有效果,我这边采用了v-if的方法用来刷新dom结构,从而达到选中的效果;
涉及到了去重,以及考核数据,是因为我的需求是拿到数据进行数据考核,防止有重复进行去重;
主要基本逻辑是利用接口返回的path:
选父级点亮子级:是利用父级的id,先对数据进行扁平化处理,循环处理完成的数据,拿到path,如果path中有包含父id的则把id,push到选中的数组中,从而达到了父亮子的效果;
子亮父:也是利用path,首先拿到当前选中的层级,获取到父级的id,直接把父级的id添加到数组中即可,这是最简单的;
子全不选,父灭:这个要稍微复杂些,当然也是利用path,我先拿到当前层级的path,进行/分割成数组,再将数组删除最后一项(也就是自己),留下来的都是父级,爷级,然后通过扁平化处理的数据,拿到对应的对象,再看是否有子级,不出意外都有,但是要做个判断,如果有,再把子级的id都那到,去循环判断 选中的数组中是否有,如果都没有则把当前的id也删掉,从而达到父级灭掉的效果
onSelect(record, selected, selectedRows, nativeEvent) {
this.tableShow = false;
if (!selected) {
// 删除
this.sfelectedRowKeys = [];
// 删除掉所有path中有id的数据
selectedRows = selectedRows.filter((row) => !row.path.includes(record.id));
this.sfelectedRowKeys = selectedRows.map((row) => row.id);
// 使用 Set 数据结构对 this.sfelectedRowKeys 进行去重
this.sfelectedRowKeys = Array.from(new Set(this.sfelectedRowKeys));
let list = record.path.split('/'); // 将路径按 '/' 分割成数组
list.pop(); // 删除最后一项
let elementsToRemove = [];
list.forEach((A) => {
let obj = this.listRecursionListTemplate.filter((item) => item.parentId == A);
if (obj && obj.length > 0) {
let allChildrenNotInSelectedKeys = obj.every((B) => {
return !this.sfelectedRowKeys.includes(B.id);
});
if (allChildrenNotInSelectedKeys) {
elementsToRemove.push(A);
}
}
});
// 删除标记的元素
elementsToRemove.forEach((element) => {
this.sfelectedRowKeys = this.sfelectedRowKeys.filter(item => item !== element);
});
// 处理考核数据
this.setcheck();
} else {
// 新增
const flattenedData = this.flattenData(this.tableData);
let selectedItems = flattenedData.filter((item) => item.path.includes(record.id));
selectedItems.forEach((A) => {
this.sfelectedRowKeys.push(A.id);
});
// 子级选中,父级默认选中
let list = record.path.split('/');
list.forEach((A) => {
this.sfelectedRowKeys.push(A);
})
// 使用 Set 数据结构对 this.sfelectedRowKeys 进行去重
this.sfelectedRowKeys = Array.from(new Set(this.sfelectedRowKeys));
// 处理考核数据
this.setcheck();
}
this.tableShow = true;
},
问题图:![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/28596b6112c9481fbf4ff903dfad0330.png