element ui 穿梭框_一个基于vue和element-ui的树形穿梭框组件【v2.2.3】

el-tree-transfer

简介·请先阅读文档及版本说明

因为公司业务使用vue框架，ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外引入其他重量级插件，因此就有了el-tree-transfer。轻量，易用，无需投入其他学习成本。

el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经引入element-ui！ 此组件功能类似于element-ui的transfer组件，但是里面的数据是树形结构！ 实际上，el-tree-transfer依赖的element-ui组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在element-ui的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。ui完全按照element-ui风格。

注意：使用此插件时默认你已经引入了element-ui的button，check-box，tree组件！

vuecli3版本

注意！ 2.2.0 版本增加lazy懒加载功能

注意！ 2.0.0 版本存在父子不关联错误，2.1.1 版本增加 arrayToTree 支持，但已经是树形数据的请不要使用此参数

注意！ 1.9.0 版本增强id为数字型的匹配强度，1.9.7版本增加defaultTransfer属性用来满足用户不想将数据拆分成fromData和toData的需求

注意！ 1.8.9 版本修复一个节点既是一侧的枝干节点又是另一侧的叶子节点时穿梭引起的重复错误！解决自定义节点名时筛选无效错误

注意！ 1.8.7 版本增加通讯录模式，可通过 mode 字段配置模式

注意！ 1.7.7 版本移动事件参数调整，直接返回移动后的 fromData 数据和 toData 数据。

注意！ 1.5 以上版本改为自动处理第一层数据的 pid 请设定为 0！！

id推荐为string，但也可以是number，请不要混用，id不能重复！

快速上手

先npm下载插件

npm install el-tree-transfer --save

或

npm i el-tree-transfer -S

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

// 你的代码

...

// 使用树形穿梭框组件

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

export defult {

data(){

return:{

mode: "transfer", // transfer addressList

fromData:[

{

id: "1",

pid: 0,

label: "一级 1",

children: [

{

id: "1-1",

pid: "1",

label: "二级 1-1",

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:{

// 切换模式 现有树形穿梭框模式tra