elementui transfer
ElementUI Transfer 组件使用指南
ElementUI 的 Transfer 组件是一种用于在两栏中移动数据的界面控件，常用于权限分配、数据选择等场景。
基本用法
Transfer 组件需要绑定 data 和 v-model 属性：
<el-transfer
v-model="selectedData"
:data="transferData">
</el-transfer>data() {
return {
transferData: [
{ key: 1, label: '选项1' },
{ key: 2, label: '选项2' }
],
selectedData: []
}
}属性配置
data 属性接收数组格式的数据，每个对象必须包含 key 和 label 字段。可以通过 props 属性自定义字段名：
<el-transfer
:props="{
key: 'id',
label: 'name'
}">
</el-transfer>自定义渲染
使用 render-content 插槽可以自定义列表项显示内容：
<el-transfer v-model="value" :data="data">
<template #default="{ option }">
<span>{{ option.key }} - {{ option.label }}</span>
</template>
</el-transfer>搜索功能
启用 filterable 属性可添加搜索功能：
<el-transfer
filterable
:filter-method="filterMethod">
</el-transfer>methods: {
filterMethod(query, item) {
return item.label.includes(query)
}
}事件处理
常用事件包括：
change：选项移动时触发left-check-change：左侧复选框变化时触发right-check-change：右侧复选框变化时触发
<el-transfer
@change="handleChange">
</el-transfer>样式定制
通过 CSS 可以调整 Transfer 组件的外观：
.el-transfer-panel {
width: 300px;
}
.el-transfer__buttons {
padding: 0 20px;
}注意事项
- 确保
key值唯一，避免渲染问题 - 大数据量时建议启用虚拟滚动或分页功能
- 移动端使用时可能需要调整布局样式
以上内容涵盖了 ElementUI Transfer 组件的主要功能和用法，可根据实际需求选择合适的配置方式。
