树状图组件到后端流程

1.在components建立组件

 

 

2. 声明树状图结构,并定义节点

 

 

 

 

 

// 每级节点

props1: {
  children: 'shelfList',
  label: 'lableName'
},

lableName 为展示的节点

 3. 在后端构造出对应的结构,用内部类

 

 4. 通过

:tree-data将值传到子组件中

5. 获取选中的节点,并传回主组件中

list = _this.$refs.tree.getCheckedNodes()
list.forEach(f => {
  // 获取第三节点的值
  if (f.leveC === '3') {
    const shelfC = {
      'lableName': f.houseId,
      'shelfKind': f.shelfKind,
      'id': f.id
    }
    var obj = {}
    obj = JSON.parse(JSON.stringify(shelfC))
    // 把值存入
    _this.aaa.push(obj)
  }
})
// 将值送回主组件
this.$emit('bbb', this.aaa)

6. 获得子主件中的值

@headback="bbb"

// 子主件的返回值
headback(aaa) {
  this.msa = aaa
},

7. 给树状图赋值

:default-checked-keys=选中的节点数组

node-key 选中的节点  ---> 只需要得到第三节点中的值就可以选上

 

8. 声明选中的数组

// 选中节点数组

checkedKeys: {
  type: Array,
  default() {
    return []
  }
}

主组件↓

:checked-keys="后端传入的数组"
向子组件中赋值,即可选中节点



注: 如何从主组件中调用子组件的方法

ref="childSon1"  主组件中声明一个通道

this.$refs.childSon1.子组件的方法名     即可