树形穿梭框---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.使用

     <tree-transfer   :title="spceForm.title"  :mode='spceForm.mode' :from_data='spceForm.treeTransferData' 
      :to_data='spceForm.toData'    :defaultProps="{label:'label',children: 'children' }" :pid="parentId"
       @add-btn='addTransfer' @remove-btn='remove' height='400px' width="100%" filter openAll>
    </tree-transfer>

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