vue实现穿梭框

Vue 实现穿梭框

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

使用 Element UI 的 Transfer 组件

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

<template>
  <el-transfer
    v-model="selectedItems"
    :data="items"
    :titles="['Source', 'Target']"
    :button-texts="['Remove', 'Add']"
  ></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: []
    };
  }
};
</script>

自定义实现穿梭框

如果需要完全自定义，可以手动实现一个穿梭框：

<template>
  <div class="transfer-container">
    <div class="list left-list">
      <h3>Source</h3>
      <ul>
        <li v-for="item in leftItems" :key="item.key">
          <input type="checkbox" v-model="item.checked" />
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="buttons">
      <button @click="moveToRight">>></button>
      <button @click="moveToLeft"><<</button>
    </div>
    <div class="list right-list">
      <h3>Target</h3>
      <ul>
        <li v-for="item in rightItems" :key="item.key">
          <input type="checkbox" v-model="item.checked" />
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftItems: [
        { key: 1, label: 'Item 1', checked: false },
        { key: 2, label: 'Item 2', checked: false },
        { key: 3, label: 'Item 3', checked: false }
      ],
      rightItems: []
    };
  },
  methods: {
    moveToRight() {
      const checkedItems = this.leftItems.filter(item => item.checked);
      this.rightItems = [...this.rightItems, ...checkedItems];
      this.leftItems = this.leftItems.filter(item => !item.checked);
    },
    moveToLeft() {
      const checkedItems = this.rightItems.filter(item => item.checked);
      this.leftItems = [...this.leftItems, ...checkedItems];
      this.rightItems = this.rightItems.filter(item => !item.checked);
    }
  }
};
</script>

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

使用 Vue Draggable 实现拖拽穿梭框

如果需要支持拖拽功能，可以使用 vuedraggable 库：

<template>
  <div class="transfer-container">
    <div class="list left-list">
      <h3>Source</h3>
      <draggable v-model="leftItems" group="items">
        <div v-for="item in leftItems" :key="item.key">
          {{ item.label }}
        </div>
      </draggable>
    </div>
    <div class="list right-list">
      <h3>Target</h3>
      <draggable v-model="rightItems" group="items">
        <div v-for="item in rightItems" :key="item.key">
          {{ item.label }}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      leftItems: [
        { key: 1, label: 'Item 1' },
        { key: 2, label: 'Item 2' },
        { key: 3, label: 'Item 3' }
      ],
      rightItems: []
    };
  }
};
</script>

注意事项

• 如果需要双向绑定，确保使用 v-model 或手动更新数据。
• 自定义实现时，注意样式和交互逻辑的细节。
• 使用第三方库时，确保安装并导入正确的组件。

以上方法可以根据具体需求选择，Element UI 的 el-transfer 适合快速集成，自定义实现适合高度定制化的场景。