1、穿梭框效果

2、基础用法

Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label为显示文本，disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 v-model 绑定的变量赋予一个初始值。

<template>
    <el-transfer
      style="text-align: left; display: inline-block"
      v-model="value4"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :titles="['待选用户', '已选用户']"
      :button-texts="['到左边', '到右边']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      :data="data">
      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
    </el-transfer>
</template>
 <script>
    export default {
      data() {
        const generateData = _ => {
          const data = [];
         for (let i = 1; i <= 15; i++) {
           data.push({
             key: i,
             label: `备选项 ${ i }`,
             disabled: i % 4 === 0
          });
        }
         return data;
       };
       return {
         data: generateData(),
         value1: [1, 4]
       };
     }
   };
 </script>

查看element官方文档可以了解到 el-transfer穿梭框的基本使用方法，本文主要介绍数据项的自定义渲染和右侧列表元素变化时触发方法的实现。
自定义数据项，除了基本的el-transfer使用方法，还需要使用Scoped Slot。