La estructura de árbol de vue3 implementa funciones de selección única y selección múltiple

• código de página

<el-dialog
                :close-on-press-escape="false"
                v-model="selectTreeShowTalentPool"
                title="岗位标签"
                width="30%"
                destroy-on-close
                :close-on-click-modal="false"
                :show-close="false"
                center>
            <div class="checkedTree">
                <el-tree
                        :data="testJsonTree"
                        :default-checked-keys="checkedKeysTalentPool"
                        show-checkbox
                        ref="tree"
                        :highlight-current="true"
                        node-key="value"
                        @check="currentCheckedTalentPool"/>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="closeSelectTreeTalentPool">取消</el-button>
                <el-button type="primary" :disabled="buttonConfirmIS"
                           @click="selectTreeConfirmTalentPool">确定</el-button>
              </span>
            </template>
        </el-dialog>

• Simular datos de backend

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
	}
]

• código 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) // 这是选中的节点数据

        
    }