Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解

Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。

核心特性与用法

基本属性

• v-model：绑定右侧列表的值（key数组）

• data：组件数据源，需包含 key 和 label 属性

• props：配置数据源的字段别名

• filterable：是否启用搜索功能

• titles：自定义左右两侧标题

• button-texts：自定义按钮文本

• left-default-checked/right-default-checked：设置默认选中项

关键事件

• change：当右侧列表变化时触发

• left-check-change：左侧选中项变化时触发

• right-check-change：右侧选中项变化时触发

插槽

• 默认插槽：自定义列表项内容

• left-footer/right-footer：自定义左右列表底部内容

filter-method 用法详解

1. 基本概念

filter-method 是 Element Plus Transfer 组件的一个属性，用于自定义穿梭框的搜索过滤逻辑。它接受一个函数，该函数有两个参数：

• query: 用户输入的搜索关键词

• item: 当前遍历的数据项

函数应返回布尔值：

• true: 保留该项

• false: 过滤掉该项

default 插槽用法详解

1. default 插槽基础用法

default 插槽允许完全自定义每个列表项的显示内容：

html

复制

下载

运行

使用示例

MaterialApplyDialog.vue

应用效果：

项目实例

MaterialApplyDialog.vue

特点：

1、自定义过滤方法 filter-method

2、数据项属性别名 props

3、插槽 default

4、插槽 left-footer

5、输入框控制数字输入

6、遍历数组元素检查数据合法性，聚焦元素，全选元素内容

7、结合实际情况调整样式

应用效果：