树形穿梭框---el-tree-tranfer 的使用以及遇到的问题

el-tree-tranfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录
github文档：https://github.com/hql7/tree-transfer

效果展示：

soogif.gif

1.安装步骤

1.先 npm 下载插件 ----》npm install el-tree-transfer --save 或者 npm i el-tree-transfer -S
2.首先在自己的.vue文件中引入el-tree-transfer --------- 》 import treeTransfer from 'el-tree-transfer'
3.然后components声明 ------->components:{ treeTransfer },
4.使用

5.props----

//node_key:必须唯一
  node_key: {
    type: String,
    default: "id"
  },
  // 自定义 pid参数名，因为后端给的参数名为parentId
  pid: {
    type: String,
    default: "parentId"
  },

6.需要在data中定义parentId:parentId

图片展示

Inked16675051-6b319e65ee7a4f5b_LI.jpg

image.png

image.png

image.png

需要注意的点问题

1.关于左侧的数据格式：

image.png

参考：https://www.cnblogs.com/lita07/archive/2004/01/13/14109809.html