el-tree、a-tree树形组件获取数据及回显

树形组件后端返回的数据包含父节点和子节点，但在子节点不全被选中的时候，不能把父节点给勾选上，否则会出现父节点被勾选，里边未被选中的子节点也全部被选中

1、el–tree

&lt;el-tree
    :data="menuData"
    :props="treeProp"
    show-checkbox
    :default-expand-all="false"
    node-key="id"
    @check="boxCheck"
    ref="treeRef"
    :default-checked-keys="checkedKeys"
&gt;
</el-tree>

const menuData = ref([])
const treeRef = ref([])
const checkedKeys = ref([])
const treeProp = ref({
    children: 'children',
    label: 'lable'
})

const getRoleMenu = (roleId) => {
    let data = {
        roleId
    }
    http.get('/xxx', data).then(res => {
        if (res.data.code === 200) {
            menuData.value = res.data.data.menus
            // 回显选中菜单
            let menuIds=res.data.data.checkedKeys
            //避免获取不到getNode
            setTimeout(()=>{
                menuIds.forEach((item) => {
                    const node = treeRef.value.getNode(item);
                    if (node.isLeaf) {
                        reeRef.value.setChecked(item, true);
                        chooseKeys.value.push(item)
                       }
                    });
                },100)
            }
        })
    }

const boxCheck = () => {
     let checkedKeys=treeRef.value.getCheckedKeys()
     let halfCheckedKeys=treeRef.value.getHalfCheckedKeys()
     chooseKeys.value=checkedKeys.concat(halfCheckedKeys)
}

//清空被选中的项
treeRef.value.setCheckedKeys([], false)

2、a-tr ee

<a-tree
    v-model:checkedKeys="checkedKeys"
    checkable
    :tree-data="treeData"
    :field-names="fieldNames"
    @check="treeCheck"
>
</a-tree>

const checkedKeys = ref([]);
const newCheckedKeys = ref([])//修改需要的所选keys
const fieldNames = {
    children: 'children',
    title: 'menuName',
    key: 'menuId'
};
const treeData = ref([])
const childNodeId=ref([])//存放所有子节点的数组

//获取后端返回的菜单数据和当前被选中的keys
const getTreeData=()=>{
    httpGet('/xxxx').then(res => {
        if (res.code === 200) {
            treeData.value = res.data.tree
            getDeepNodeId(treeData.value)
            //求交集
            let checkedKeysArr = res.data.checkedKeys
            const result = [...new Set(childNodeId.value)].filter((item) => new Set(eval(checkedKeysArr)).has(item))
            checkedKeys.value = [...result]
        }
    })
}

//循环遍历出最深层子节点（包含所有的子节点及没有子节点的父节点），存放在一个数组中
const getDeepNodeId=(data)=>{
    data.map((item) => {
        if (item.children &amp;&amp; item.children.length > 0) {
            getDeepNodeId(item.children);
        } else {
            childNodeId.value.push(item.menuId);
        }
    });
}

const treeCheck = (checkedKeys, info) => {
    //将父节点拼接到子节点，用于修改功能
    //newCheckedKeys.value = checkedKeys.concat(info.halfCheckedKeys);
    newCheckedKeys.value =[...checkedKeys, ...info.halfCheckedKeys]
}