Vue 搭配element-UI 实现可搜索穿梭框

首先，如果还没有看过官方的例子的话，建议先浏览下官方的文档，本文主要介绍的是自己踩过的坑。在这基础上，假设您已经有了一定的vue.js的基础
官方地址：
http://element.eleme.io/#/zh-CN/component/transfer

1、html 片段

注意：官网上的例子是给出了城市名，通过拼音搜索过滤，在线上环境中，我们可能通常需要根据lable(即显示的选项)直接进行搜索。在html代码段中，除了v-model及初始的数据集data(即选项)外，只需要一个filterable参数，后面 的filter-method可以不需要

 <template>
    <el-transfer
         filterable
         v-model="value"
        :data="data">
        el-transfer>
 template>

2、js代码

在通常情况下，选项data集可能是需要动态请求的，并且在穿梭框中，data数据集数据格式需要处理一下。
请求数据的接口，这里就先不写了，只是请求回数据后，数据需要处理一下，并将处理后的列表赋值给data.
这里我定义了一个函数：

        dealData(tmpData) {
          if (tmpData) {
            const data1 = []
            tmpData.forEach((asset, index) => {
              data1.push({
                label: asset.sn,
                key: asset.sn,
                index: index
              })
            })
            return data1
          }
        },

这里解释一下，函数的参数是一个列表，列表项又是一个字典，如：
[{‘sn’:1,’name’:’test1’},{‘sn’:2,’name’:’test2’}…]这种格式，可以根据需要设置，这里返回一个列表，列表项也是字典类型，其中：‘label’就是页面上显示的内容项，key其实就是选中时表达提交时的值，index暂时没用到，可以根据需要保留。

备注

1、在v-model绑定的数据类型一定要注意，需要是数组。否则会报错:e.splice is not a function,导致选中的数据不能从右边移到左边。
2、实现搜索功能时，可以不用定义filter-method方法。当然了，如果需要的话可以探索（我调试了好久老报错，决定先不采用了）
3、其他问题欢迎随时沟通。QQ：951205228