element 树形控件，如何只将选中的子节点展示到右边的框去呀？

Question

当选中节点时将其展示到右边的框里，两边实现同步，

Answer 1

右侧要求也是一个树结构，还是只展示选中的数据？
只展示选中的数据，不要求树结构，所以可以使用以下方法来获取所有选中的node：

let nodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()) // 获取所有选中节点，我发现getHalfCheckedNodes不生效是[],所以其实只使用getCheckedNodes就可以

let filterNodes = nodes.filter(node=>{ // 过滤出子节点，也就是不含childred字段的节点数据
    return node.children === undefined
})

console.log(filterNodes) // 当前的子节点对象集合，结构如下：

/*[{
  id: 8
  label: "张海波"
  status: false
},
{
  id: 9
  label: "王云"
  status: false
}]*/

• 然后就可以将filterNodes通过v-for的方法渲染到右侧区域

Answer 2

有两种方式
1.换用组件穿梭框
2.监听左侧树复选框的check-change事件，每次触发遍历所有选中节点及父级节点数并保存，右侧利用数据双向绑定实时更新保存的树就行了

Answer 3

有个check（选择复选框）事件，获取选中的数据this.$refs.tree.getCheckedNodes()循环展示就行了

<template v-for="(item,index) in items">
    <span :key="index">
        {{item}}
    </span>
</template>


<el-tree
  ref="tree"
  @check="handleCheck">
</el-tree>

methods : {
    handleCheck(node){
        let checkNode = this.$refs.tree.getCheckedNodes()
        this.items = checkNode.map(v => v.label)
    }
}

Answer 4

在递归树形结构数据时用一个key来区分是部门还是人员,例如:isLeaf =true 的是人员，isLeaf=false 是部门，
树形图有个check-change事件check-change

<el-tree
  node-key="id"
  show-checkbox
  @check-change="myfun">
</el-tree>
myfun(data,check) {
 if(check == true && data.isLeaf == true) {
    arr.push(data)
} else {
  ...
}