关于Element ui Transfer （穿梭框）使用心得

最近在使用Element ui做一个大型的智能监测项目?，因客户需求中有需要使用到Transfer （穿梭框）这个功能，接下来就聊一聊（装x）我的使用心得。

首先客户的需求呢：通过穿梭框来实现对某个节点的配置关联。先看实现效果

这个需求实现不是很复杂，话不多说上源码：

其标签含义官方文档已介绍很清楚了，我就这简单介绍：

v-model 存放右侧数据（数据必须在data（：data）中定义），只存放key，已[key0,key1,]格式存放；

props 数据源的字段别名 ;

titles 标题；

change  右侧列表元素变化时触发，也就是对中间的两个按钮触发，回调：handleChange(value, direction, movedKeys) value：当前值（右侧值），direction：数据移动的方向（'left' / 'right'），movedKeys：发生移动的数据 key 数组；

value：

direction：

movedKeys：

 

data 数据源；

 

如有只用神器vs code 的同学，可以试试vscode-element-helper这个大杀器。