树形结构的数据,找出已知节点的绝对路径(el-cascader提供默认选中)

树形结构的数据,已知其中某个节点的id,找出它的绝对路径(el-cascader提供默认选中)

  • 需求
    • 实现方式
    • 遇到的问题
    • 思路
      • 实现
      • 问题
    • 这是我的个人思路,哪里有错误请多多指教哈!

需求

产品中有一个分组的功能,分组的层级不限制扩展,每个用户都会有一个分组(用户只保存当前分组的id);

实现方式

使用element-uiel-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();

问题

这种方式适用于肯定存在的节点,其它的情况还没有测试,

**

这是我的个人思路,哪里有错误请多多指教哈!

**

你可能感兴趣的:(树形结构的数据,找出已知节点的绝对路径(el-cascader提供默认选中))