【ant design vue】 a-cascader级联下拉框获取及回显（非动态加载级联数据）

最新推荐文章于 2025-04-14 11:02:36 发布

谭CV

最新推荐文章于 2025-04-14 11:02:36 发布

阅读量1w

点赞数 7

本文链接：https://blog.csdn.net/THcoding_Cat/article/details/113696646

版权

ant design vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何处理级联数据的树状结构排序问题，并详细阐述了如何根据子id回显父级id序列，以满足特定的回显需求。涉及`a-cascader`组件的配置和`getParentNodes`函数的使用。

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

1.获取

list为级联数据，该数据为树状对象数组结构，可能涉及到树状对象排序问题

:field-names="{}"：当数据中的对象与该组件要求属性不一致时，可通过该属性进行声明替换

<a-cascader
     :options="list"
     placeholder="请选择"
     change-on-select
     :field-names="{label: 'name', value: 'id', children: 'children' }"
     v-model="selectedMenu"
/>

2.回显数据

回显要求数据结构如下：

是一个字符串数组，后一个字符串是前一个字符串的子id

["111", "222"]

所以生产需求为：根据保存的子id查到该子id的所有父级id,并按顺序（祖先-子）保存到数组中返回给级联组件的v-model=""绑定的值

if(this.form.menuId){
     let nodes = getParentNodes(this.form.menuId,this.list);
     nodes.forEach(v => {
           this.selectedMenu.push(v.id);
     });
     console.log(this.selectedMenu);//["111", "222"]
}

/**
 * 根据menuId遍历获取menuId有关对象的父id
 */
let nodes = [];
export function getParentNodes(id, tree) {
    _getParentNodes([], id, tree);
    return nodes;
}

function _getParentNodes(his, targetId, tree) {
    tree.some((list) => {
        const children = list.children || [];
        if (list.menuId === targetId) {
            nodes = his;
            return true;
        } else if (children.length > 0) {
            const history = [...his];
            history.push(list);
            return _getParentNodes(history, targetId, children);
        }
    })
}