基于element-ui实现穿梭树组件

element ui本身的穿梭框不支持树结构,左右都是树其实是有插件的,不过我这里的需求是左树右列表,因此对作者的源码进行了一定的定制修改,不过写到后来发现这里掺了太多的业务逻辑,不过还是按照组件把过程和逻辑记录一下

DOM结构及成品

DOM没什么好说的,基本上左中右结构,左右两棵树,中间操作穿梭的按钮,左边会带有搜索,右边则在底部有操作按钮,最终结果如图所示

左侧点击展开、收起,选中数据可添加进右侧,此时左侧数据保持选中状态被disable,右侧数据选中后可移除,与此同时左侧相应数据取消被选中和disable状态;同时右侧数据点击眼镜激活预览后(选中被预览的数据和选中要被移除的数据是两个独立的选择),点击「预览」按钮可以在BIM引擎中预览相应模型(这就是另外一个故事了)

事件处理&状态监测

源数据

状态监测

选中事件

全选事件

筛选

目标数据

状态监测

选中

全选

选中预览

添加按钮
移除按钮

完整代码

1
2