vue 和 element-ui 的树形穿梭框组件 el-tree-transfer

1.代码

<template>
  <div class="app-container">
    <tree-transfer 
    :title="title"                
    :from_data='fromData'         
    :to_data='toData'            
    :defaultProps="{label:'label'}" 
    @addBtn='add'                 
    @removeBtn='remove'          
    :mode='mode'                
    height='540px'            
    filter                     
    openAll> 
    </tree-transfer>
  </div>
</template>
<script>
  import treeTransfer from 'el-tree-transfer'; // 引入
  export default {
    components: {
      headerTitle,
    },
   data () {
     return {
      title: ["待选", "已选"],
      mode: "transfer",
      fromData: [ 
        {
          id: "1",
          pid: 0,
          label: "一级 1",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "二级 1-1",
              children: [{
                  id: "1-1-1",
                  pid: "1-1",
                  children: [],
                  label: "二级 1-1-1"
                },
                {
                  id: "1-1-2",
                  pid: "1-1",
                  children: [],
                  label: "二级 1-1-2"
                }
              ]
            },
            {
              id: "1-2",
              pid: "1",
              label: "二级 1-2",
              children: [{
                  id: "1-2-1",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-1"
                },
                {
                  id: "1-2-2",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-2"
                }
              ]
            }
          ]
        },
      ],
      toData: []
     }
   },
   methods: {
      // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
      changeMode() {
        if (this.mode == "transfer") {
          this.mode = "addressList";
        } else {
          this.mode = "transfer";
        }
      },
      // 监听穿梭框组件添加
      add(fromData, toData, obj) {
        console.log("fromData:", fromData);
        console.log("toData:", toData);
        console.log("obj:", obj);
      },
      // 监听穿梭框组件移除
      remove(fromData, toData, obj) {
        console.log("fromData:", fromData);
        console.log("toData:", toData);
        console.log("obj:", obj);
      }
   }
  }
</script>

2.效果图展示

3.参考:el-tree-transfer 官方 npm 文档