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;
}

注意事项

1. 确保 key 值唯一，避免渲染问题
2. 大数据量时建议启用虚拟滚动或分页功能
3. 移动端使用时可能需要调整布局样式

以上内容涵盖了 ElementUI Transfer 组件的主要功能和用法，可根据实际需求选择合适的配置方式。