树形结构的数据,找出已知节点的绝对路径(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();

问题

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

**

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

**

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值