vue中使用树形穿梭框

vue中使用树形穿梭框

先上效果图

1.先下载插件

npm install el-tree-transfer --save 或 npm i el-tree-transfer -S //下载

2.js中引入

import treeTransfer from 'el-tree-transfer' // 引入

3.注册

 components:{ treeTransfer } // 注册

4.组件使用

<template>
  <div>
   <!-- 使用树形穿梭框组件 -->
    <tree-transfer 
        :title="title"                 
        :from_data='fromData'        
        :to_data='toData'             
        :defaultProps="{label:'label'}" 
        @addBtn='add'                 
        @removeBtn='remove'          
        :mode='mode'                 
        height='400px'             
        filter     
        openAll> 
    </tree-transfer>
  </div>
</template>

5.js中代码

<script>
import treeTransfer from 'el-tree-transfer' // 引入
export default {
    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>

	最后注明：新手小白的第一篇博客，请大家多多指教，集成多次百度成果，搞出来的树性穿梭框，如有雷同，请见谅啦~~~
	2021-04-06