vue3 树结构实现可单选和多选功能

• 页面代码

• 模拟后端数据

const testJsonTree = [{
		"isOnly": 0,
		"children": [{
				"isOnly": 0,
				"label": "本科",
				"value": 139
			},
			{
				"isOnly": 0,
				"label": "大专",
				"value": 140
			},
			{
				"isOnly": 0,
				"label": "中专",
				"value": 141
			},
			{
				"isOnly": 0,
				"label": "初中",
				"value": 142
			},
			{
				"isOnly": 0,
				"label": "高中",
				"value": 143
			}
		],
		"label": "学历（单选项）",
		"value": 1
	},
	{
		"isOnly": 1,
		"children": [{
				"isOnly": 1,
				"label": "未服役",
				"value": 147
			},
			{
				"isOnly": 1,
				"label": "已退役",
				"value": 148
			},
			{
				"isOnly": 1,
				"label": "服役中",
				"value": 149
			}
		],
		"label": "服役情况（多选项）",
		"value": 4
	},
	{
		"isOnly": 0,
		"children": [{
				"isOnly": 0,
				"label": "自定义标签1",
				"value": 169
			},
			{
				"isOnly": 0,
				"label": "自定义标签2",
				"value": 170
			}
		],
		"label": "自定义唯一标签（单选项）",
		"value": 163
	}
]

• js代码

/** 选择的树结构数据*/
    function currentCheckedTalentPool(nodeObj, SelectedObj) {
        const parentChildNodes = proxy.$refs.tree.getNode(nodeObj).parent.data.children // 获取选择的数据
        if (proxy.$refs.tree.getNode(nodeObj).parent.data.isOnly == 0) { // 判断是否为单选项 // 0-代表单选, 1-代表多选
            /*_______________单多选项 最后选中值数组对象事件________________*/
            parentChildNodes.forEach((ele,j) => {
                SelectedObj.checkedNodes.forEach((checked,i) => {
                    if (ele.value == checked.value) {
                        SelectedObj.checkedNodes.splice(i, 1)
                        SelectedObj.checkedNodes.push(nodeObj)
                    }
                    SelectedObj.checkedNodes = unique(SelectedObj.checkedNodes) // 去重
                })
            })
            /*_______________单多选项 最后选中值事件________________*/
            SelectedObj.checkedKeys.push(-1)
            SelectedObj.checkedKeys.sort((old,New)=>{
                return old -New
            })
            SelectedObj.checkedKeys.forEach(value => {
                parentChildNodes.forEach(ele => {
                    if (value == ele.value) {
                        let index = SelectedObj.checkedKeys.indexOf(value)
                        SelectedObj.checkedKeys.splice(index, 1)
                    }
                    SelectedObj.checkedKeys.push(nodeObj.value)
                    SelectedObj.checkedKeys = [...new Set(SelectedObj.checkedKeys)] // 去重
                    SelectedObj.checkedKeys.sort((old,New)=>{
                        return old -New
                    })
                })
            })
        }
        proxy.$nextTick(() => {
            proxy.$refs.tree.setCheckedKeys(SelectedObj.checkedKeys, true) // 选中树
        })
        console.log(SelectedObj.checkedNodes) // 这是选中的节点数据

        
    }