element穿梭框怎么进行添加

Element UI 提供了一个名为 "el-transfer" 的穿梭框组件，用于在两个列表之间进行数据交换。以下是基本的步骤：

1. **引入组件**：首先，在你的 Vue 项目中安装 Element UI 并引入 `Transfer` 组件：

   <script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. **在模板中使用**：在需要添加穿梭框的地方，添加组件实例，并配置必要的属性：

   <el-transfer :data-source="sourceData" :target-data="targetData"
                :render-header="headerRenderer" :filter-method="filterMethod"
                :transfer-method="transferMethod"
                @change="handleTransferChange">
     <!-- 标题或其他自定义内容 -->
     <div slot="header">穿梭框标题</div>
   </el-transfer>

- `dataSource` 和 `targetData` 分别表示源列表和目标列表的数据。
- `render-header` 可以设置头部的自定义渲染函数。
- `filterMethod` 用于过滤展示的元素。
- `transferMethod` 控制实际的转移操作，例如清空、添加等。
- `handleTransferChange` 是在数据变化时触发的回调，可以处理用户的操作结果。

3. **绑定数据和事件处理**：

   data() {
     return {
       sourceData: [], // 初始化源数据
       targetData: [], // 初始化目标数据
     };
   },
   
   methods: {
     headerRenderer(item) { /* 自定义头部内容渲染 */ },
     filterMethod(sourceItem, targetItems) { /* 过滤策略 */ },
     transferMethod(sourceItems, targetItems) { /* 数据转移逻辑 */ },
     handleTransferChange源Items, targetItems) { /* 更新状态并处理业务逻辑 */ },
   }

4. **样式调整**：你可以根据需要调整穿梭框的样式，通过 CSS 或者 Element UI 的主题系统。