当前位置：首页 > VUE

vue实现表格穿梭

2026-03-10 08:07:35VUE

Vue实现表格穿梭框功能

穿梭框（Transfer）是一种常见的UI组件，用于在两个列表之间移动项目。以下是基于Vue实现表格穿梭框的完整方案：

组件结构设计

创建两个表格区域（左侧源表格和右侧目标表格），中间放置操作按钮。通过v-model绑定数据实现双向同步。

<template>
  <div class="transfer-container">
    <div class="table-box source-table">
      <el-table :data="sourceData" @selection-change="handleSourceSelection">
        <!-- 表格列定义 -->
      </el-table>
    </div>

    <div class="operation-buttons">
      <el-button @click="moveToRight">></el-button>
      <el-button @click="moveToLeft"><</el-button>
    </div>

    <div class="table-box target-table">
      <el-table :data="targetData" @selection-change="handleTargetSelection">
        <!-- 表格列定义 -->
      </el-table>
    </div>
  </div>
</template>

核心逻辑实现

数据管理和移动逻辑是穿梭框的核心，需要维护选中状态和列表更新。

export default {
  data() {
    return {
      sourceData: [], // 源数据
      targetData: [], // 目标数据
      sourceSelection: [], // 左侧选中项
      targetSelection: [] // 右侧选中项
    }
  },
  methods: {
    handleSourceSelection(val) {
      this.sourceSelection = val
    },
    handleTargetSelection(val) {
      this.targetSelection = val
    },
    moveToRight() {
      this.targetData = [...this.targetData, ...this.sourceSelection]
      this.sourceData = this.sourceData.filter(
        item => !this.sourceSelection.includes(item)
      )
      this.sourceSelection = []
    },
    moveToLeft() {
      this.sourceData = [...this.sourceData, ...this.targetSelection]
      this.targetData = this.targetData.filter(
        item => !this.targetSelection.includes(item)
      )
      this.targetSelection = []
    }
  }
}

样式优化

为穿梭框添加基本样式，使其布局合理美观。

.transfer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.table-box {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.operation-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}