当前位置：首页 > VUE

vue穿梭框怎么实现

2026-02-22 01:35:27VUE

Vue 穿梭框实现方法

使用 Element UI 的 Transfer 组件

Element UI 提供了现成的穿梭框（Transfer）组件，适合快速集成到 Vue 项目中。安装 Element UI 后，直接引入组件即可：

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

自定义实现基础穿梭框

如果需要完全自定义功能，可以通过以下方式实现：

<template>
  <div class="transfer-container">
    <div class="list">
      <div v-for="item in leftList" :key="item.id">
        <input type="checkbox" v-model="item.checked">
        {{ item.name }}
      </div>
    </div>
    <div class="buttons">
      <button @click="moveRight">></button>
      <button @click="moveLeft"><</button>
    </div>
    <div class="list">
      <div v-for="item in rightList" :key="item.id">
        <input type="checkbox" v-model="item.checked">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftList: [
        { id: 1, name: 'Item 1', checked: false },
        { id: 2, name: 'Item 2', checked: false }
      ],
      rightList: []
    }
  },
  methods: {
    moveRight() {
      this.leftList.forEach(item => {
        if (item.checked) {
          this.rightList.push({...item, checked: false});
        }
      });
      this.leftList = this.leftList.filter(item => !item.checked);
    },
    moveLeft() {
      this.rightList.forEach(item => {
        if (item.checked) {
          this.leftList.push({...item, checked: false});
        }
      });
      this.rightList = this.rightList.filter(item => !item.checked);
    }
  }
}
</script>

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

使用第三方库 vue-transfer-dom

对于更复杂的需求，可以考虑专门的开源库如 vue-transfer-dom：

安装依赖：
```
npm install vue-transfer-dom
```

在组件中使用：


<template>
<transfer-dom
 :left-data="leftData"
 :right-data="rightData"
 @transfer-to-right="handleToRight"
 @transfer-to-left="handleToLeft">
</transfer-dom>
</template>

import TransferDom from 'vue-transfer-dom';

export default { components: { TransferDom }, data() { return { leftData: ['Item 1', 'Item 2'], rightData: [] } }, methods: { handleToRight(items) { this.rightData = [...this.rightData, ...items]; this.leftData = this.leftData.filter(item => !items.includes(item)); }, handleToLeft(items) { this.leftData = [...this.leftData, ...items]; this.rightData = this.rightData.filter(item => !items.includes(item)); } } }

```