当前位置：首页 > 前端教程

elementui穿梭

2026-03-06 02:29:39前端教程

elementui穿梭框使用指南

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

基本用法

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

elementui穿梭

<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：目标列表排序方式

高级功能

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

elementui穿梭

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