[element-ui] el-tree 树结构实现父子不关联(check-strictly) 默认全选 拉平tree数据(转为一维数组)

treeData: [
   {
     id: 1,
     label: '一级 1',
     children: [
       {
         id: 4,
         label: '二级 1-1',
         children: [
           {
             id: 9,
             label: '三级 1-1-1'
           },
           {
             id: 10,
             label: '三级 1-1-2'
           }
         ]
       }
     ]
   },
   {
     id: 2,
     label: '一级 2',
     children: [
       {
         id: 5,
         label: '二级 2-1'
       },
       {
         id: 6,
         label: '二级 2-2'
       }
     ]
   },
   {
     id: 3,
     label: '一级 3',
     children: [
       {
         id: 7,
         label: '二级 3-1'
       },
       {
         id: 8,
         label: '二级 3-2'
       }
     ]
   }
 ], // 树形数据
 levelData: [], // 拉平后的treeData
// 获取拉平后的数据
  getLevelData() {
    let cloneData = JSON.parse(JSON.stringify(this.treeData))
    this.levelData = this.recursion(cloneData)
    console.log(this.levelData)
  },
 // 递归调用
  recursion(arr) {
    return [].concat(...arr.map(item => {
      if (item.children) {
        let arr = [].concat(item, ...this.recursion(item.children))
        delete item.children
        return arr
      }
      return [].concat(item)
    }
    ))
  }

参考:

el-tree 树结构实现父子不关联(check-strictly) 且能全选、反选、半选

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值