当前位置：首页 > VUE

vue穿梭框组件实现

2026-02-09 18:20:36VUE

Vue 穿梭框组件实现

使用 Element UI 的 Transfer 组件

Element UI 提供了一个现成的穿梭框组件 el-transfer，适合快速实现需求。

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

自定义穿梭框组件

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

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

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

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

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

<style>
.custom-transfer {
  display: flex;
  justify-content: space-between;
}
.transfer-panel {
  width: 200px;
  border: 1px solid #ddd;
  padding: 10px;
}
.transfer-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

高级功能扩展

对于更复杂的需求，可以考虑以下增强功能：

搜索过滤：在面板顶部添加搜索框，过滤显示项
```
<input v-model="searchQuery" placeholder="Search...">
```
全选/反选：添加全选按钮控制所有选项
```
<button @click="toggleAll">Toggle All</button>
```
拖拽排序：使用 vuedraggable 实现拖拽功能
```
npm install vuedraggable
```
分页显示：大数据量时分页处理