element ui本身的穿梭框不支持树结构，左右都是树其实是有插件的，不过我这里的需求是左树右列表，因此对作者的源码进行了一定的定制修改，不过写到后来发现这里掺了太多的业务逻辑，不过还是按照组件把过程和逻辑记录一下
DOM结构及成品
DOM没什么好说的，基本上左中右结构，左右两棵树，中间操作穿梭的按钮，左边会带有搜索，右边则在底部有操作按钮，最终结果如图所示
左侧点击展开、收起，选中数据可添加进右侧，此时左侧数据保持选中状态被disable，右侧数据选中后可移除，与此同时左侧相应数据取消被选中和disable状态；同时右侧数据点击眼镜激活预览后（选中被预览的数据和选中要被移除的数据是两个独立的选择），点击「预览」按钮可以在BIM引擎中预览相应模型（这就是另外一个故事了）
事件处理&状态监测
源数据
状态监测
选中事件
全选事件
筛选
目标数据
状态监测
选中
全选
选中预览
添加按钮
移除按钮
完整代码
1 |