需求
产品中有一个分组的功能,分组的层级不限制扩展,每个用户都会有一个分组(用户只保存当前分组的id);
实现方式
使用element-ui的el-cascader的组件,使用每个节点数据的id作为键值
数据结构**(id无规律)**:
[{
id: 'eeeee1',
name: '分组1',
children: [{
id: 'eeeewe1',
name: '分组1-1',
children: [{
id: 'eeesdsde1',
name: '分组1-1-1',
children: ...
},
...
],
...
]},
...
]
遇到的问题
编辑用户分组时,需要默认选中之前的分组信息,el-cascader中,要想默认勾选,需要设置v-model为其绝对路径的数组,
但我们只能拿到用户的当前分组id,所以需要构造出绝对路径的数组;
思路
第一想到的就是使用递归的方式,循环children获取对应的id;
调用方法首先返回目标的id,然后将其父节点的id也放到数组中去,这样一来得到的是一个反向的list,我们需要将最终数组反转一下
实现
var tmpParentIdList = [];
function getTreeInitModel(key,list){
for (var i = 0; i < list.length; i++) {
if (list[i].id == key) {
tmpParentIdList.push(list[i].id);
return true;
}else{
if (list[i].children && list[i].children.length > 0) {
if (getTreeInitModel(key,list[i].children)) {
tmpParentIdList.push(list[i].id);
return true;
}
}
}
}
return false;
}
调用:
tmpParentIdList = [];
getTreeInitModel(selectId,treeList);
this.treeModel = tmpParentIdList.reverse();
问题
这种方式适用于肯定存在的节点,其它的情况还没有测试,
**
这是我的个人思路,哪里有错误请多多指教哈!
**