浅谈关于自定义穿梭框，实现el-Transfer的简单功能

最近在开发一个基于vue+element的项目，学到了很多前端的知识，也遇到了很多坑，我总结了一下自己实现el-transfer功能的过程。

需要构造两个el-table表格，左边的是原始数据，右边的是选中的数据，中间加两个按钮，并且左边的表格支持一个查询功能，这就是一个简单的穿梭框。下面讲解具体实现的逻辑。
首先是最外层是一个dialog框，然后里边是上下的两个div层，上层div是查询条件，下层div里又分为左中右三个div，分别是原始数据，按钮区，已选数据。

这一层最重要的是实现单选和全选的功能，


选中一条记录设置一个状态标志。
下面简单讲解一下查询功能的实现。

其实就是利用js的filter方法来实现过滤，return过滤条件中为true的结果。
下面讲解按钮的实现。


根据标志遍历全部数据，将左边选中的数据push进右边的表格，然后再将左边选中的过滤掉，其实用splice方法也行，但我觉得filter的效率比for循环快一点。右边的按钮同理，只是逻辑反过来就行。同时右边的表格可编辑，这一点是transfer所不具备的，

利用v-model双向数据绑定的特性实现。