el-tree与el-transfer结合成树形穿梭框（tree-transfer）

下载

npm install el-tree-transfer --save

import treeTransfer from 'el-tree-transfer' 
export default {
    components:{ treeTransfer },
    data(){
        return{
            parentId: 'parentId',
            mode: "transfer",
            fromData: [
                {
                id: "1",
                parentId: 0,
                label: "房源综合业务管理平台",
                children: [
                {
                    id: "1-1",
                    parentId: "1",
                    label: "首页",
                    children: []
                },{
                    id: "1-2",
                    parentId: "1",
                    label: "房源信息管理系统",
                    children: [
                    {
                        id: "1-2-1",
                        parentId: "1-2",
                        children: [],
                        label: "数据统计"
                    },{
                        id: "1-2-2",
                        parentId: "1-2",
                        children: [],
                        label: "房源信息管理"
                    },{
                        id: "1-2-3",
                        parentId: "1-2",
                        children: [],
                        label: "房源入库管理"
                    }]
                }]
            }],
            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);
      }
    },
}

注意：

1， 标题 类型：Array 必填：false 默认：[“源列表”, “目标列表”]
2，设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
3，源数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid！！！！！！！！