element-ui穿梭框

### 关于 Element UI 穿梭框 (Transfer) 组件的使用教程

#### 基础配置与初始化
为了在项目中使用 `el-transfer` 组件，需先安装并导入 Element UI 库。对于 Vue 2.x 版本的应用程序来说，这一步骤必不可少[^1]。

import { Transfer } from 'element-ui';
Vue.use(Transfer);

#### 数据准备
定义好要传递给穿梭框的数据源以及目标容器中的初始数据：

<template>
  <div class="transfer-demo">
    <!-- 定义穿梭框 -->
    <el-transfer v-model="value" :data="data"></el-transfer>
  </div>
</template>

<script>
export default {
  data() {
    const generateData = _ => {
      let data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: false, // 可选设置某些项不可用
        });
      }
      return data;
    };
    
    return {
      value: [], // 目标容器内的key集合
      data: generateData(), // 所有可转移项目的数组
    };
  },
};
</script>

上述代码展示了如何创建一个简单的双向选择器，并通过 `v-model` 将已选定的目标侧元素绑定到组件实例的状态变量 `value` 上；同时提供了一个由对象组成的列表作为候选池供用户挑选。

#### 自定义样式与布局调整
可以通过自定义类名来修改默认外观，比如改变宽度、高度等属性以适应页面设计需求[^4]。

.transfer-demo .el-transfer-panel{
  width: 300px !important;
}

此外还可以利用插槽机制来自定义标题栏、按钮文字等内容，增强用户体验。

#### 高级特性支持
除了基本的选择操作外，Element UI 还提供了诸如过滤搜索、批量迁移等功能的支持，使得复杂场景下的交互更加灵活高效[^3]。

例如可以添加筛选输入框帮助快速定位特定条目：

<el-transfer filterable :filter-method="filterMethod"
             :titles="['待选', '已选']" ... >
</el-transfer>

其中 `filterMethod` 函数用于控制哪些记录应该显示在当前视图中。