当前位置：首页 > VUE

vue 穿梭框实现

2026-02-19 22:27:42VUE

Vue 穿梭框实现方法

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

使用 Element UI 的 Transfer 组件

Element UI 提供了现成的穿梭框组件，可以直接使用：

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

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

自定义实现穿梭框

如果需要自定义样式或功能，可以手动实现：

<template>
  <div class="transfer-container">
    <div class="list left-list">
      <h3>Available Items</h3>
      <ul>
        <li v-for="item in leftItems" :key="item.id">
          <input type="checkbox" v-model="selectedLeft" :value="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>

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

    <div class="list right-list">
      <h3>Selected Items</h3>
      <ul>
        <li v-for="item in rightItems" :key="item.id">
          <input type="checkbox" v-model="selectedRight" :value="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftItems: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      rightItems: [],
      selectedLeft: [],
      selectedRight: []
    }
  },
  methods: {
    moveToRight() {
      const itemsToMove = this.leftItems.filter(item => 
        this.selectedLeft.includes(item.id)
      )
      this.rightItems = [...this.rightItems, ...itemsToMove]
      this.leftItems = this.leftItems.filter(item => 
        !this.selectedLeft.includes(item.id)
      )
      this.selectedLeft = []
    },
    moveToLeft() {
      const itemsToMove = this.rightItems.filter(item => 
        this.selectedRight.includes(item.id)
      )
      this.leftItems = [...this.leftItems, ...itemsToMove]
      this.rightItems = this.rightItems.filter(item => 
        !this.selectedRight.includes(item.id)
      )
      this.selectedRight = []
    }
  }
}
</script>

<style>
.transfer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.list {
  width: 200px;
  border: 1px solid #ddd;
  padding: 10px;
  height: 300px;
  overflow-y: auto;
}
.transfer-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>