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

猜你喜欢

转载自blog.csdn.net/THcoding_Cat/article/details/113696646