1. 前言

穿梭框就是左右各有一个复选框列表，可以将左侧选中的项目移动到右边，后者将右侧的选中项移回左边的控件。

一般用于物品交接等场景，本篇就来介绍下穿梭框的用法。

2. 基本用法

先看代码：

  基本用法:{{value}}
    <el-transfer v-model="value" :data="preData" @change="selectChange"></el-transfer>
    preData: [{
        key: 1,
        label: '北京',
        disabled: false
      },
      {
        key: 2,
        label: '上海',
        disabled: false
      },
      {
        key: 3,
        label: '广州',
        disabled: true
      }],
      value: [],
  methods: {
    selectChange(value) {
      console.log(value);
    }
  }

解释下，data属性用来绑定数据来源，key表示绑定的唯一标志，label是显示到穿梭框中的值，而disabled决定该数据项能否被移动（disabled为true时表示禁用，此时该数据项为灰色无法移动）。

value属性是选中项key的数组，当数据项被移动到右侧时，其key值被加入value数组中。

最后@change表示选中项发生变化时触发的方法。上述代码效果如下：

3. 可搜索

有时候数据项比较多，可以使用filterable属性开启搜索功能。

可搜索：
    <el-transfer filterable v-model="value" :data="preData"></el-transfer>
• 1
• 2

效果如下：

4. 自定义标题和按钮的文本

可以自定义列表标题和按钮显示的文本：

 自定义标题和按钮名称：

   <el-transfer :titles="['候选城市', '选中城市']" :button-texts="['左移', '右移']" v-model="value" :data="preData"></el-transfer>

效果如下：

5. 设置数据项别名

当我们的数据是来源于数据库时，此时后台返回的JSON数据可能并不是使用key/label/disabled这样的名称。

此时我们可以利用props属性自定义数据项的别名。

数据项别名:

   <el-transfer v-model="value" :data="dbData" :props="{

     key: 'id',

     label: 'name',

     disabled:'disabled'

     }"></el-transfer>

所以上述代码可以绑定如下数据：

  dbData: [{

       id: 1,

       name: '北京',

       disabled: false

     },

     {

       id: 2,

       name: '上海',

       disabled: false

     },

     {

       id: 3,

       name: '广州',

       disabled: true

     }],

6. 小结

穿梭框使用场景不算多，有一个基础的了解就足够了。