当前位置：首页 > VUE

vue穿梭框实现

2026-01-15 06:15:14VUE

Vue 穿梭框实现方法

使用 Element UI 的 Transfer 组件

Element UI 提供了现成的 Transfer 穿梭框组件，适用于 Vue 2.x 项目。安装 Element UI 后可直接使用：

npm install element-ui

基础用法示例：

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

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

使用 Ant Design Vue 的 Transfer 组件

对于 Vue 3.x 项目，Ant Design Vue 提供了兼容的 Transfer 组件：

npm install ant-design-vue@next

基础实现代码：

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

<script>
import { ref } from 'vue'
export default {
  setup() {
    const mockData = Array.from({ length: 20 }).map((_, i) => ({
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
    }))

    const targetKeys = ref([])

    const handleChange = (nextTargetKeys, direction, moveKeys) => {
      console.log('targetKeys:', nextTargetKeys)
      console.log('direction:', direction)
      console.log('moveKeys:', moveKeys)
    }

    return {
      mockData,
      targetKeys,
      handleChange
    }
  }
}
</script>

自定义实现穿梭框

如果需要完全自定义的穿梭框，可以通过以下方式实现核心功能：

<template>
  <div class="transfer-container">
    <div class="source-panel">
      <h3>Source</h3>
      <ul>
        <li v-for="item in sourceItems" :key="item.id">
          <input type="checkbox" v-model="item.selected">
          {{ item.label }}
        </li>
      </ul>
    </div>

    <div class="transfer-buttons">
      <button @click="moveToRight">→</button>
      <button @click="moveToLeft">←</button>
    </div>

    <div class="target-panel">
      <h3>Target</h3>
      <ul>
        <li v-for="item in targetItems" :key="item.id">
          <input type="checkbox" v-model="item.selected">
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

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

<style>
.transfer-container {
  display: flex;
  justify-content: space-between;
}
.source-panel, .target-panel {
  width: 45%;
  border: 1px solid #ddd;
  padding: 10px;
}
.transfer-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>