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

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);
        }
    })
}