Vue el-tree與el-transfer的結合使用之el-tree-transfer

原文以及github地址

效果：

首先下載插件：

npm install el-tree-transfer --save
或
npm i el-tree-transfer -S

結果如下即成功：

然後引入：

<script>
  import treeTransfer from 'el-tree-transfer'    // 引入

  export defult {
    data(){
      return:{
        title: ["待選","已選"],    //標題 類型：Array 必填：false 默認：["源列表", "目標列表"]
        mode: "transfer", //設置模式，字段可選值爲transfer|addressList 類型：String 必填：false 補充：mode默認爲transfer模式，即樹形穿梭框模式，可配置字段爲addressList改爲通訊錄模式，通訊錄模式時按鈕不可自定義名字，如要自定義標題名在title數組傳入四個值即可，addressList模式時標題默認爲通訊錄、收件人、抄送人、密送人
        fromData:[    //源數據 類型：Array 必填：true 補充：數據格式同element-ui tree組件，但必須有id和pid
          {
            id: "1",
            pid: 0,    //自定義pid的參數名，默認爲"pid" 必填：false
            label: "一級 1",
            children: [
              {
                id: "1-1",
                pid: "1",
                label: "二級 1-1",
                disabled: true,
                children: []
              },
              {
                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:[]    //目標數據 類型：Array 必填：true 補充：數據格式同element-ui tree組件，但必須有id和pid
      }
    },
    methods:{
      // 切換模式 現有樹形穿梭框模式transfer 和通訊錄模式addressList
      changeMode() {
        if (this.mode == "transfer") {
          this.mode = "addressList";
        } else {
          this.mode = "transfer";
        }
      },
      // 監聽穿梭框組件添加
      add(fromData,toData,obj){
        // 樹形穿梭框模式transfer時，返回參數爲左側樹移動後數據、右側樹移動後數據、移動的{keys,nodes,halfKeys,halfNodes}對象
        // 通訊錄模式addressList時，返回參數爲右側收件人列表、右側抄送人列表、右側密送人列表
        console.log("fromData:", fromData);
        console.log("toData:", toData);
        console.log("obj:", obj);
      },
      // 監聽穿梭框組件移除
      remove(fromData,toData,obj){
        // 樹形穿梭框模式transfer時，返回參數爲左側樹移動後數據、右側樹移動後數據、移動的{keys,nodes,halfKeys,halfNodes}對象
        // 通訊錄模式addressList時，返回參數爲右側收件人列表、右側抄送人列表、右側密送人列表
        console.log("fromData:", fromData);
        console.log("toData:", toData);
        console.log("obj:", obj);
      }
    },
    components:{ treeTransfer } // 註冊
  }
</script>

最後就可以想使用其他組件一樣使用el-tree-transfer了：

<template>
  <div>
    // 其他代碼
    ...
    // 使用樹形穿梭框組件
    <tree-transfer 
        :title="title"                 //標題 類型：Array 必填：false 默認：["源列表", "目標列表"]
        :from_data='fromData'         //源數據 類型：Array 必填：true 補充：數據格式同element-ui tree組件，但必須有id和pid
        :to_data='toData'             //目標數據 類型：Array 必填：true 補充：數據格式同element-ui tree組件，但必須有id和pid
        :defaultProps="{label:'label'}" //配置項-同el-tree中props 必填： false 補充：用法和el-tree的props一樣
        @addBtn='add'                 //點擊添加按鈕時觸發的事件 回調參數：function(fromData,toData,obj),樹形穿梭框transfer模式分別爲1.移動後左側數據，2.移動後右側數據，3.移動的節點keys、nodes、halfKeys、halfNodes對象；通訊錄addressList模式時返回參數爲右側收件人列表、右側抄送人列表、右側密送人列表
        @removeBtn='remove'            //點擊移除按鈕時觸發的事件 回調參數：function(fromData,toData,obj),樹形穿梭框transfer模式分別爲1.移動後左側數據，2.移動後右側數據，3.移動的節點keys、nodes、halfKeys、halfNodes對象；通訊錄addressList模式時返回參數爲右側收件人列表、右側抄送人列表、右側密送人列表
        :mode='mode'                 //設置模式，字段可選值爲transfer|addressList 類型：String 必填：false 補充：mode默認爲transfer模式，即樹形穿梭框模式，可配置字段爲addressList改爲通訊錄模式，通訊錄模式時按鈕不可自定義名字，如要自定義標題名在title數組傳入四個值即可，addressList模式時標題默認爲通訊錄、收件人、抄送人、密送人
        height='400px'             //高度 類型：String 必填：false 默認：320px
        filter                     //是否開啓篩選功能 類型：Boolean 必填：false
        openAll>                  //是否默認展開全部 類型：Boolean 必填：false
    </tree-transfer>
  </div>
</template>