//组件
<a-tree
checkable
v-model="exampleCheckedKeys"
:tree-data="exampleTreeData"
:expanded-keys="exampleExpandedKeys"
:auto-expand-parent="autoExpandParent"
:replace-fields="exampleReplaceFields"
:checkStrictly="true"
@expand="onExpand"
@check="onCheck"
/>
//js
retrun{
exampleCheckedKeys: {},
exampleTreeData: [
{
"code": "1",
"key": "1",
"title": "测试1",
"sort": "1",
"pcode": "",
"children": [
{
"code": "2",
"key": "2",
"title": "测试12",
"sort": "1",
"pcode": "1",
"children": [
{
"code": "3",
"key": "3",
"title": "测试123",
"sort": "1",
"pcode": "2"
}
]
}
]
},
{
"code": "11",
"key": "11",
"title": "测试11",
"sort": "2",
"pcode": ""
}
],
exampleExpandedKeys: [],
autoExpandParent: true,
exampleReplaceFields: {},
exampleDataList: [
{
"id": "1",
"pid": "",
"code": "test1",
"name": "测试1"
},
{
"id": "2",
"pid": "1",
"code": "test12",
"name": "测试12"
},
{
"id": "3",
"pid": "2",
"code": "test123",
"name": "测试123"
},
{
"id": "11",
"pid": "",
"code": "test11",
"name": "测试11"
}
],//原始未转换为树形数据的数据集
}
//树结构展开
onExpand(expandedKeys) {
this.exampleExpandedKeys = expandedKeys;
this.autoExpandParent = false;
},
//树结构复选框点击事件
onCheck(checkedKeys,e) {
this.exampleCheckedKeys = checkedKeys
//判断当是选中还是取消选中
if(e.checked) {
//选中时父级都选中
//找到当前节点的所有父节点
let parentKeys = this.findParentList(e.node.eventKey)
let nParentKeys = []
for(let i=0;i<this.exampleDataList.length;i++){
if(parentKeys.indexOf(this.exampleDataList[i].id) != -1 && this.exampleDataList[i].pid != undefined && this.exampleDataList[i].pid != null){
nParentKeys.push(this.exampleDataList[i].id)
}
}
this.exampleCheckedKeys.checked = checkedKeys.checked.concat(nParentKeys)
//去重
this.exampleCheckedKeys.checked = [...new Set(this.exampleCheckedKeys.checked)];
}else{
//取消当前选中节点
this.exampleCheckedKeys.checked = this.exampleCheckedKeys.checked.filter(function(item) {
return item !== e.node.eventKey
});
//取消选中时取消子集的选中
//找到当前节点的所有子节点
let childNodes = this.findChildLists(this.exampleDataList,e.node.eventKey)
let childNodeKeys = []
//找到当前节点的所有子节点key
for(let i=0;i<childNodes.length;i++){
childNodeKeys.push(childNodes[i].id)
}
//移除所有子节点的选中
this.exampleCheckedKeys.checked = this.exampleCheckedKeys.checked.filter(function(item) {
return childNodeKeys.indexOf(item) == -1
});
}
},
//查找所有父节点
findParentList(nodeId) {
let ids = []
let child = this.exampleDataList.find(item => item.id === nodeId)
while (child && child.pid) {
ids = [child.pid, ...ids]
child = this.exampleDataList.find(item2 => item2.id === child.pid)
}
return ids
},
//查找所有子节点
findChildLists(nodes, id) {
// 获取该节点的所有子节点
const childNodes = nodes.filter(n => n.pid === id);
// 如果没有子节点,则返回空数组
if (childNodes.length === 0) {
return [];
}
// 递归地获取每个子节点的子孙节点,并将它们拼接到当前数组中
return childNodes.concat(
childNodes.map(node => this.findChildLists(nodes, node.id)).flat()
);
},