elementui transfer
ElementUI Transfer 组件使用指南
ElementUI 的 Transfer 组件用于在两栏之间转移数据，适用于权限分配、数据分类等场景。以下为详细使用方法：
基础用法
在模板中引入 el-transfer 组件，通过 v-model 绑定选中项，data 属性传入数据源：
<el-transfer v-model="selectedKeys" :data="dataList"></el-transfer>数据源需包含 key 和 label 字段：
data() {
return {
dataList: [
{ key: 1, label: '选项1' },
{ key: 2, label: '选项2' }
],
selectedKeys: []
}
}可搜索功能
添加 filterable 属性启用搜索：
<el-transfer
filterable
filter-placeholder="请输入关键词"
:data="dataList">
</el-transfer>自定义渲染内容
通过 render-content 插槽自定义显示样式：
<el-transfer :data="dataList">
<template #default="{ option }">
<span>{{ option.key }} - {{ option.label }}</span>
</template>
</el-transfer>左右列表标题定制
使用 titles 属性修改左右标题：
<el-transfer
:titles="['待选列表', '已选列表']"
:data="dataList">
</el-transfer>禁用状态
在数据源中添加 disabled 字段可禁用特定项：
dataList: [
{ key: 1, label: '选项1', disabled: true }
]事件监听
常用事件包括 change（选项变化时触发）和 left-check-change/right-check-change（勾选状态变化时触发）：
<el-transfer
@change="handleTransferChange"
:data="dataList">
</el-transfer>注意事项
- 数据源的
key值需保持唯一 - 当数据量较大时建议启用分页功能
- 可通过
left-default-checked和right-default-checked设置默认选中项
完整 API 文档可参考 ElementUI 官方说明，包含更多高级配置如分页、自定义按钮文本等参数。
