当前位置：首页 > VUE

vue自己实现穿梭框

2026-01-21 10:29:38VUE

实现 Vue 穿梭框的核心逻辑

穿梭框（Transfer）的核心功能是左右两侧列表数据的双向选择与移动。以下是关键实现步骤：

数据结构设计

定义左右两侧的数据源和已选数据：

data() {
  return {
    leftData: [],       // 左侧源数据
    rightData: [],      // 右侧源数据
    leftSelected: [],   // 左侧选中项
    rightSelected: []   // 右侧选中项
  }
}

渲染左右列表

使用 v-for 渲染可选项，绑定选中状态：

<div class="transfer-left">
  <h4>可选列表</h4>
  <ul>
    <li v-for="item in leftData" 
        @click="toggleSelection(item, 'left')"
        :class="{selected: leftSelected.includes(item)}">
      {{ item.label }}
    </li>
  </ul>
</div>

选择项逻辑

实现单项/全选切换：

methods: {
  toggleSelection(item, side) {
    const selected = side === 'left' ? 'leftSelected' : 'rightSelected'
    const index = this[selected].indexOf(item)
    index === -1 
      ? this[selected].push(item)
      : this[selected].splice(index, 1)
  }
}

移动按钮逻辑

实现左右移动功能：

transferItems(direction) {
  if (direction === 'right') {
    this.rightData = [...this.rightData, ...this.leftSelected]
    this.leftData = this.leftData.filter(x => !this.leftSelected.includes(x))
    this.leftSelected = []
  } else {
    this.leftData = [...this.leftData, ...this.rightSelected]
    this.rightData = this.rightData.filter(x => !this.rightSelected.includes(x))
    this.rightSelected = []
  }
}

全选/清空功能

添加批量操作按钮：

vue自己实现穿梭框

selectAll(side) {
  this[`${side}Selected`] = [...this[`${side}Data`]]
},

clearAll(side) {
  this[`${side}Selected`] = []
}

样式优化关键点

使用 flex 布局实现左右分栏

高亮显示选中项样式

.selected {
background-color: #f0f7ff;
border-left: 3px solid #1890ff;
}

完整组件示例

<template>
  <div class="transfer-container">
    <transfer-panel 
      :data="leftData" 
      :selected="leftSelected"
      @select="toggleSelection($event, 'left')"
      @select-all="selectAll('left')"/>

    <div class="transfer-buttons">
      <button @click="transferItems('right')">→</button>
      <button @click="transferItems('left')">←</button>
    </div>

    <transfer-panel
      :data="rightData"
      :selected="rightSelected"
      @select="toggleSelection($event, 'right')"
      @select-all="selectAll('right')"/>
  </div>
</template>