使用a-directory-tree实现目录多选

最新推荐文章于 2024-08-19 10:13:33 发布

小满blue

最新推荐文章于 2024-08-19 10:13:33 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3+ts 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/taozi8957/article/details/129492811

vue3+ts 专栏收录该内容

10 篇文章

订阅专栏

文章描述了一个Vue应用中的<a-directory-tree>组件的使用，涉及v-model绑定、属性设置如dropdown-style、checkable等。主要功能包括获取目录数据、处理节点点击事件以加载子目录、实现节点禁用和选中逻辑。代码中定义了处理函数如getServiceLayerDataEvt、onCheckEvt，用于动态更新目录树并控制节点的选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<a-directory-tree
    v-model:checkedKeys="selectedKeysVal"
    style="width: 100%"
    :dropdown-style="{
        maxHeight: '400px',
        overflow: 'auto',
    }"
    checkable
    :tree-data="serverLayerSelect"
    :field-names="fieldNames"
    @click="getServiceLayerDataEvt"
    @select="onCheckEvt"
></a-directory-tree>

const fieldNames: any = {
    children: 'children',
    title: 'name',
};
const selectedKeysVal: any = ref([]);// 选中选项的数组
//获取最初目录
const serverLayerSelect: Ref<Array<any>> = ref([]);
// 显示目录时调用该函数
const addMapLayerEvt = () => {
    serverLayerSelect.value = [];
    getSelectCatalogTrees().then((res: any) => {
        if (res.code == 200) {
            serverLayerSelect.value = res.data.map((it: any) => {
                it.disableCheckbox = true;
                return it;
            });
        }
    });
};
// 点击目录获取子目录
const getServiceLayerDataEvt = (checkedKeys: any,e: any) => {
    if (e.children.length == 0) {
        getCatalogLists({ id: e.id }).then((res: any) => {
            if (res.code == 200) {
                let list = res.data.map((it: any) => {
                    it.children = it.list;
                    it.disableCheckbox = true;
                    return it;
                });
                e.children = list.map((item: any) => {
                    item.disableCheckbox = true;
                    return item;
                });
                searchTree(serverLayerSelect.value, e.id, list);
            }
        });
    }
}
function searchTree(nodes: any, id: string, list: any) {
    for (let _i = 0; _i < nodes.length; _i++) {
        if (nodes[_i].id === id) {
            nodes[_i].children = list.map((it) => {
                it.disableCheckbox = true;
                return it;
            });
        } else {
            if (nodes[_i].children && nodes[_i].children.length > 0) {
                searchTree(nodes[_i].children, id, list);
            }
        }
    }
}
// 勾选显示
const onCheckEvt = (checkedKeys: string[], e: any) => {
    dealData(e.node);
};
const dealData = (data: any) => {
    if (data.children) {
        for (let i = 0; i < data.children.length; i++) {
            const data1 = data.children[i];
            if (data1) {
                dealData(data1);
            }
        }
    } else {
        // 不需要显示勾选的项
        if (data.id == '1574318899918864385') {
            selectedKeysVal.value = [];
            return;
        }
        if (data.id == '1582940878267809794') {
            return;
        }
        if (!selectedKeysVal.value.includes(data.key)) {
            selectedKeysVal.value.push(data.key);
        } else {
            selectedKeysVal.value.splice(
                selectedKeysVal.value.indexOf(data.key),
                1,
            );
        }
    }
};