Ant Design Vue <a-tree>节点选父级不选中子级,选子级选中所有父级

//组件

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值