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组件！

第一层数据的 pid 请设定为 0！！

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

1.先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",

<