当前位置：首页 > VUE

vue穿梭框实现

2026-02-11 09:16:57VUE

Vue穿梭框实现方法

Vue穿梭框（Transfer）是一种常见的前端组件，用于在两个列表之间移动数据项。以下是几种实现方式：

使用Element UI的Transfer组件

Element UI提供了现成的Transfer组件，适用于Vue 2.x项目：

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

<script>
export default {
  data() {
    return {
      sourceData: [
        { key: 1, label: 'Option 1' },
        { key: 2, label: 'Option 2' }
      ],
      selectedData: []
    }
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    }
  }
}
</script>

使用Ant Design Vue的Transfer组件

Ant Design Vue也提供了Transfer组件，适用于Vue 3.x项目：

<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    :data-source="dataSource"
    :render="item => item.title"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const targetKeys = ref([])
const dataSource = ref([
  { key: '1', title: 'Option 1' },
  { key: '2', title: 'Option 2' }
])

const handleChange = (nextTargetKeys, direction, moveKeys) => {
  console.log(nextTargetKeys, direction, moveKeys)
}
</script>

自定义实现穿梭框

如果需要完全自定义，可以手动实现：

<template>
  <div class="transfer-container">
    <div class="list left-list">
      <div v-for="item in leftItems" :key="item.id" class="item">
        <input type="checkbox" v-model="item.checked">
        {{ item.label }}
      </div>
    </div>

    <div class="actions">
      <button @click="moveToRight">→</button>
      <button @click="moveToLeft">←</button>
    </div>

    <div class="list right-list">
      <div v-for="item in rightItems" :key="item.id" class="item">
        <input type="checkbox" v-model="item.checked">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftItems: [
        { id: 1, label: 'Item 1', checked: false },
        { id: 2, label: 'Item 2', checked: false }
      ],
      rightItems: []
    }
  },
  methods: {
    moveToRight() {
      this.rightItems = [
        ...this.rightItems,
        ...this.leftItems.filter(item => item.checked)
      ]
      this.leftItems = this.leftItems.filter(item => !item.checked)
    },
    moveToLeft() {
      this.leftItems = [
        ...this.leftItems,
        ...this.rightItems.filter(item => item.checked)
      ]
      this.rightItems = this.rightItems.filter(item => !item.checked)
    }
  }
}
</script>

<style>
.transfer-container {
  display: flex;
}
.list {
  width: 200px;
  border: 1px solid #ddd;
  padding: 10px;
}
.actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}
</style>

实现功能增强

对于更复杂的需求，可以添加以下功能：

搜索过滤功能
全选/全不选
拖拽排序
分页加载

<template>
  <div class="transfer-container">
    <div class="list">
      <input v-model="leftSearch" placeholder="Search...">
      <button @click="selectAllLeft">Select All</button>
      <!-- 列表内容 -->
    </div>

    <div class="actions">
      <!-- 操作按钮 -->
    </div>

    <div class="list">
      <input v-model="rightSearch" placeholder="Search...">
      <button @click="selectAllRight">Select All</button>
      <!-- 列表内容 -->
    </div>
  </div>
</template>

以上方法可以根据项目需求选择合适的实现方式，UI库提供的组件更快速高效，自定义实现则更加灵活可控。

vue穿梭框实现