Cascader 级联选择器来展示数据

291 阅读1分钟

有这样的一组数组

let aa = [
    {u1:1,u2:"组织部",u3:0},
    {u1:2,u2:"卫生部",u3:0},
    {u1:3,u2:"媒体部",u3:0},
    {u1:4,u2:"学习部",u3:0},
    {u1:5,u2:"娱乐组",u3:1},
    {u1:6,u2:"咸鱼组",u3:5},
    {u1:7,u2:"躺平组",u3:3},
    {u1:8,u2:"金手指组",u3:3},
    {u1:9,u2:"卷王组",u3:4},
]
u1:唯一标识名,
u2:属性名,
u3:父id,

现在,需要将这组数组用element组件--## Cascader 级联选择器来展示,如下图:

image.png

这是组件内的数据(部分选择)

image.png 所以,需要手动修改所需要的数据。

let bb=[];
aa.forEach((v)=>{
        if(v.u3 == 0){
          bb.push(v)
        }
        aa.filter((item)=>{
          if(v.u1 == item.u3){
            if(v.children){
              v.children.push(item)
            }else{
               v.children = [];
               v.children.push(item)
            }
          }
        })
      })
console.log(bb,'bbb')

image.png

展开的数据

image.png

image.png