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. 小结
穿梭框使用场景不算多，有一个基础的了解就足够了。
