elementplus穿梭框 多列 elementui树形穿梭框

el-tree和el-transfer穿梭树踩坑

穿梭树github地址:

https://github.com/hql7/tree-transfer

先 npm 下载插件

npm install el-tree-transfer --save

或

npm i el-tree-transfer -S

然后你可以像使用普通组件一样使用 el-tree-transfer
html代码：

<template>
  <div>
    // 你的代码
    ...
    // 使用树形穿梭框组件
    <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>

JS代码：

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

  export default {
    data(){
      return{
        mode: "transfer", 
    	*//注意fromData数据格式，必须完全一样，如果不一样，需要进行对应的更改*
        fromData:[
          {
            id: "1",
            pid: 0,
            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:[]
      }
    },
    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);
      }
    },
    comporents:{ treeTransfer } // 注册
  }
</script>

这些东西很多博客里都写到了，但是，我在这里是分享自己踩坑经历：

1. 直接把git上的代码拿过来用是报错的，错误点如下：
2. fromData的数据格式（包括字段名称）要注意，都必须跟作者保持一直，因为源码中是用这些字段来进行树与数组结构的转化。
   本人在用的时候就出现了一个问题，数据从左边穿梭到右边后树形结构丢了，后来找了好久发现是后台返给我的fromData中没有pid,是parentId,所以在源码中解析不到pid，就不会给你转成树！
   如果后台返的字段名就是不一样，那怎么办呢？别担心，有办法：（组件源码获取父组件传值如下）

props: {
     ···
    // el-tree 配置项
    defaultProps: {
      type: Object,
      default: () => {
        return { label: "label", children: "children" };
      }
    },
    // el-tree node-key 必须唯一
    node_key: {
      type: String,
      default: "id"
    },
    // 自定义 pid参数名
    pid: {
      type: String,
      default: "parentId"
    },

	···
  },

可以通过以上几个参数来进行传值，如:

这样就可以了。

3. 这两点注意到了的话，那一般的需求都可以解决掉了，可是如果还有其他需求怎么办？比如el-tree中子级要求单选···这时，我们可以把源码下载下来，然后自己再根据自己的需求进行更改。需要注意我们只需要这几个文件就可以了：

把这4个文件复制到自己的项目中（注意文件的引入），然后将

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

换成：

import treeTransfer from 'transfer-extend.vue文件地址' // 引入

就可以了。源码中作者将代码注释的很清楚，然后根据自己的需求再改就好啦。