elementui穿梭

elementui穿梭框使用指南

Element UI 的穿梭框（Transfer）组件用于在两栏之间移动元素，常用于权限分配、数据选择等场景。

基本用法

在项目中引入 Element UI 后，可以通过以下代码实现基本穿梭框功能：

<template>
  <el-transfer
    v-model="value"
    :data="data"
    :titles="['Source', 'Target']"
    @change="handleChange">
  </el-transfer>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      value: []
    }
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    }
  },
  created() {
    for (let i = 1; i <= 15; i++) {
      this.data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0
      })
    }
  }
}
</script>

属性配置

穿梭框支持多种配置属性：

• v-model：绑定当前选中项的key数组
• data：数据源数组，需包含key和label字段
• titles：左右两侧标题
• filterable：是否可搜索过滤
• filter-placeholder：搜索框占位文本
• target-order：目标列表排序方式

高级功能

实现自定义渲染和复杂操作：

<el-transfer
  v-model="value"
  :data="data"
  :titles="['可选', '已选']"
  :format="{
    noChecked: '${total}',
    hasChecked: '${checked}/${total}'
  }"
  @left-check-change="handleLeftCheckChange"
  @right-check-change="handleRightCheckChange">
  <template #left-footer>
    <el-button size="small">操作</el-button>
  </template>
  <template #right-footer>
    <el-button size="small">操作</el-button>
  </template>
</el-transfer>

常见问题解决

数据更新后视图不刷新时，可以尝试：

• 确保data数组中的key唯一
• 使用Vue.set或数组变异方法更新数据
• 必要时添加key属性强制重新渲染

性能优化

处理大数据量时：

• 使用虚拟滚动或分页加载
• 避免频繁更新整个data数组
• 考虑使用lazy模式延迟渲染