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