自定义穿梭框（transter）组件_穿梭框组件

一.说明

本组件主要是以element-plus的transter组件的效果图作为参考，但是在上面也加了一些自己的想法。组件是用v3写的，这里仅做分享。例如：

1.左边列表可以使用select来选择多个列表数据。

2.数据可以进行单选和全选（同element）。

3.对于选中的数据个数和当前的数据总数也有实时显示（同element）。

4.同样也支持自定义搜索方法，搜索占位符支持自定义设置（同element）。

5.支持传入一个数字数组进行选中数据，通过下方选中数据按钮触发，选中按钮文字支持自定义（同element）。

6.左右按钮的功能和element-plus一致，可以自定义文字（同element）。

7.支持数据的左右拖拽，数据列表内部的拖拽会交换数据。

8.右下方按钮的导出数据可以导出右边选中的数据。

9.右边列表的标题文字支持自定义（同element）。

10.可以设置传入的toolTip属性为true，这样当鼠标移动到复选框或者文字上时，可以显示悬浮框提示。

11.目前支持两类穿梭框：default/table,table类型穿梭框就是数据变成了表格的形式了，这样操作的数据都是表格的每一行。

12.可以通过dialog(对话框)包裹这个组件的方法这样通过导出按钮可以自由导出我们想要的数据了。

二、效果展示

 

 最后当然组件肯定还有问题，发现问题可以和我说，谢谢！

dksUI: 希望把自己平时的一些想法分享给别人，这里有我自己平时写的小组件，有bug可以给我留言嗷。