vue实现传输列表

Vue 实现传输列表

在 Vue 中实现传输列表（Transfer List）功能，通常涉及两个列表之间的数据转移。以下是实现方法：

双向数据绑定与事件处理

定义两个列表数据，使用 v-model 或 v-for 渲染列表项，并通过事件处理函数实现数据转移。

<template>
  <div class="transfer-list">
    <div class="list">
      <h3>源列表</h3>
      <ul>
        <li v-for="item in sourceList" :key="item.id">
          <input type="checkbox" v-model="selectedItems" :value="item.id" />
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="controls">
      <button @click="moveToTarget">>></button>
      <button @click="moveToSource"><<</button>
    </div>
    <div class="list">
      <h3>目标列表</h3>
      <ul>
        <li v-for="item in targetList" :key="item.id">
          <input type="checkbox" v-model="selectedItems" :value="item.id" />
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sourceList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      targetList: [],
      selectedItems: []
    };
  },
  methods: {
    moveToTarget() {
      this.selectedItems.forEach(id => {
        const index = this.sourceList.findIndex(item => item.id === id);
        if (index !== -1) {
          this.targetList.push(this.sourceList[index]);
          this.sourceList.splice(index, 1);
        }
      });
      this.selectedItems = [];
    },
    moveToSource() {
      this.selectedItems.forEach(id => {
        const index = this.targetList.findIndex(item => item.id === id);
        if (index !== -1) {
          this.sourceList.push(this.targetList[index]);
          this.targetList.splice(index, 1);
        }
      });
      this.selectedItems = [];
    }
  }
};
</script>

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

使用第三方组件库

许多 Vue 组件库（如 Element UI、Ant Design Vue）提供了现成的 Transfer 组件，可以直接使用。

以 Element UI 为例：

<template>
  <el-transfer
    v-model="targetList"
    :data="sourceList"
    :titles="['源列表', '目标列表']"
    :button-texts="['向左移动', '向右移动']"
    :format="{
      noChecked: '${total}',
      hasChecked: '${checked}/${total}'
    }"
  />
</template>

<script>
export default {
  data() {
    return {
      sourceList: [
        { key: 1, label: 'Item 1' },
        { key: 2, label: 'Item 2' },
        { key: 3, label: 'Item 3' }
      ],
      targetList: []
    };
  }
};
</script>

自定义拖拽功能

如果需要更灵活的交互，可以通过 HTML5 的拖拽 API 实现拖拽转移。

<template>
  <div class="drag-transfer">
    <div class="list" @drop="dropSource" @dragover.prevent>
      <h3>源列表</h3>
      <ul>
        <li
          v-for="item in sourceList"
          :key="item.id"
          draggable="true"
          @dragstart="dragStart(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="list" @drop="dropTarget" @dragover.prevent>
      <h3>目标列表</h3>
      <ul>
        <li
          v-for="item in targetList"
          :key="item.id"
          draggable="true"
          @dragstart="dragStart(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sourceList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      targetList: [],
      draggedItem: null
    };
  },
  methods: {
    dragStart(item) {
      this.draggedItem = item;
    },
    dropSource() {
      const index = this.targetList.findIndex(
        item => item.id === this.draggedItem.id
      );
      if (index !== -1) {
        this.sourceList.push(this.draggedItem);
        this.targetList.splice(index, 1);
      }
    },
    dropTarget() {
      const index = this.sourceList.findIndex(
        item => item.id === this.draggedItem.id
      );
      if (index !== -1) {
        this.targetList.push(this.draggedItem);
        this.sourceList.splice(index, 1);
      }
    }
  }
};
</script>

以上方法可以根据需求选择或组合使用，实现灵活的传输列表功能。