当前位置：首页 > VUE

vue实现传输列表

2026-03-08 23:21:38VUE

Vue 实现传输列表

在 Vue 中实现传输列表（Transfer List）功能，通常涉及两个列表之间的数据移动。以下是实现的基本方法和代码示例。

基本实现思路

数据准备
定义两个列表数据源，分别表示左侧和右侧的列表项。通常使用数组存储列表项，每个项包含唯一标识和显示文本。

data() {
  return {
    leftList: [
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
    ],
    rightList: [],
    selectedLeft: [],
    selectedRight: [],
  }
}

列表渲染
使用 v-for 渲染左右两个列表，并通过 v-model 绑定选中状态。

vue实现传输列表

<div class="transfer-container">
  <div class="list">
    <h3>Left List</h3>
    <ul>
      <li v-for="item in leftList" :key="item.id">
        <input type="checkbox" v-model="selectedLeft" :value="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
  <div class="actions">
    <button @click="moveToRight">Move to Right →</button>
    <button @click="moveToLeft">← Move to Left</button>
  </div>
  <div class="list">
    <h3>Right List</h3>
    <ul>
      <li v-for="item in rightList" :key="item.id">
        <input type="checkbox" v-model="selectedRight" :value="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</div>

移动逻辑
实现从左侧移动到右侧和从右侧移动到左侧的方法。

methods: {
  moveToRight() {
    const selectedItems = this.leftList.filter(item =>
      this.selectedLeft.includes(item.id)
    )
    this.rightList = [...this.rightList, ...selectedItems]
    this.leftList = this.leftList.filter(item =>
      !this.selectedLeft.includes(item.id)
    )
    this.selectedLeft = []
  },
  moveToLeft() {
    const selectedItems = this.rightList.filter(item =>
      this.selectedRight.includes(item.id)
    )
    this.leftList = [...this.leftList, ...selectedItems]
    this.rightList = this.rightList.filter(item =>
      !this.selectedRight.includes(item.id)
    )
    this.selectedRight = []
  }
}

使用第三方库

如果需要更复杂的功能（如拖拽、搜索等），可以使用现成的 Vue 传输列表组件，例如：

vue实现传输列表

Element UI 的 Transfer 组件
安装 Element UI 后，直接使用 <el-transfer> 组件。

<el-transfer
  v-model="rightList"
  :data="leftList"
  :titles="['Source', 'Target']"
></el-transfer>

data() {
  return {
    leftList: [
      { key: 1, label: 'Item 1' },
      { key: 2, label: 'Item 2' },
    ],
    rightList: []
  }
}

Vue Draggable
如果需要拖拽功能，可以结合 vuedraggable 实现。

样式优化

为传输列表添加基本样式，使其更美观。

.transfer-container {
  display: flex;
  gap: 20px;
}
.list {
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
}
.actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

通过以上方法，可以快速实现一个基础的传输列表功能，并根据需求扩展更复杂的交互。