当前位置：首页 > VUE

vue穿梭框怎么实现

2026-01-21 10:08:57VUE

Vue 穿梭框实现方法

Vue 穿梭框（Transfer）通常用于在两个列表之间移动数据项，以下是常见的实现方式：

vue穿梭框怎么实现

使用 Element UI 组件

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

vue穿梭框怎么实现

<template>
  <el-transfer
    v-model="selectedItems"
    :data="allItems"
    :titles="['可选列表', '已选列表']"
    :props="{ key: 'value', label: 'desc' }"
  />
</template>

<script>
export default {
  data() {
    return {
      allItems: [
        { value: '1', desc: '选项1' },
        { value: '2', desc: '选项2' }
      ],
      selectedItems: []
    }
  }
}
</script>

自定义实现

如需完全自定义穿梭框功能，可通过以下方式构建：

<template>
  <div class="transfer-container">
    <div class="list">
      <h3>源列表</h3>
      <div v-for="item in sourceList" :key="item.id" @click="selectItem(item)">
        {{ item.name }}
      </div>
    </div>

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

    <div class="list">
      <h3>目标列表</h3>
      <div v-for="item in targetList" :key="item.id" @click="deselectItem(item)">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sourceList: [
        { id: 1, name: '项目A' },
        { id: 2, name: '项目B' }
      ],
      targetList: [],
      selectedItems: []
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItems.push(item)
    },
    deselectItem(item) {
      this.selectedItems = this.selectedItems.filter(i => i.id !== item.id)
    },
    moveToRight() {
      this.targetList = [...this.targetList, ...this.selectedItems]
      this.sourceList = this.sourceList.filter(
        item => !this.selectedItems.some(sel => sel.id === item.id)
      )
      this.selectedItems = []
    },
    moveToLeft() {
      this.sourceList = [...this.sourceList, ...this.selectedItems]
      this.targetList = this.targetList.filter(
        item => !this.selectedItems.some(sel => sel.id === item.id)
      )
      this.selectedItems = []
    }
  }
}
</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>