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

原创已于 2023-01-04 14:31:16 修改 · 5.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-10-19 10:40:46 首次发布

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在前端开发中，使用Element UI和Ant Design两个库的树形组件（el-tree和a-tree）来展示和管理后端返回的树形数据。在处理子节点未全选时，如何避免父节点被错误选中。同时展示了如何回显已选中的菜单，并提供了数据获取、节点选择变更的处理函数。文章还涵盖了如何清空选中项和获取半选中的节点。

1、el-tree

2、a-tree

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

1、el-tree

<el-tree
    :data="menuData"
    :props="treeProp"
    show-checkbox
    :default-expand-all="false"
    node-key="id"
    @check="boxCheck"
    ref="treeRef"
    :default-checked-keys="checkedKeys"
>
</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-tree

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

参考1

参考2