vue实现表格穿梭

Vue实现表格穿梭功能

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

使用Element UI的Transfer组件

Element UI提供了现成的Transfer组件，适合快速实现基础穿梭功能：

<template>
  <el-transfer
    v-model="selectedItems"
    :data="items"
    :titles="['可选列表', '已选列表']"
    filterable
    @change="handleChange">
  </el-transfer>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      selectedItems: []
    }
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    }
  }
}
</script>

自定义表格穿梭组件

如果需要更复杂的表格布局，可以自定义实现：

<template>
  <div class="transfer-container">
    <div class="left-table">
      <el-table :data="leftData" @selection-change="handleLeftSelection">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
      </el-table>
    </div>

    <div class="transfer-buttons">
      <el-button @click="moveToRight">→</el-button>
      <el-button @click="moveToLeft">←</el-button>
    </div>

    <div class="right-table">
      <el-table :data="rightData" @selection-change="handleRightSelection">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftData: [],
      rightData: [],
      leftSelection: [],
      rightSelection: []
    }
  },
  methods: {
    handleLeftSelection(val) {
      this.leftSelection = val
    },
    handleRightSelection(val) {
      this.rightSelection = val
    },
    moveToRight() {
      this.rightData = [...this.rightData, ...this.leftSelection]
      this.leftData = this.leftData.filter(item => 
        !this.leftSelection.some(sel => sel.id === item.id)
      )
    },
    moveToLeft() {
      this.leftData = [...this.leftData, ...this.rightSelection]
      this.rightData = this.rightData.filter(item => 
        !this.rightSelection.some(sel => sel.id === item.id)
      )
    }
  }
}
</script>

<style>
.transfer-container {
  display: flex;
  justify-content: space-between;
}
.transfer-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

使用Ant Design Vue的Table Transfer

Ant Design Vue提供了TableTransfer组件，结合了表格和穿梭框的功能：

<template>
  <a-table-transfer
    :data-source="dataSource"
    :target-keys="targetKeys"
    :show-search="true"
    @change="onChange"
    @search="onSearch"
  >
    <template v-slot:leftColumns>
      <a-table-column
        title="Name"
        data-index="name"
        :sorter="(a, b) => a.name.localeCompare(b.name)"
      />
    </template>
    <template v-slot:rightColumns>
      <a-table-column
        title="Name"
        data-index="name"
        :sorter="(a, b) => a.name.localeCompare(b.name)"
      />
    </template>
  </a-table-transfer>
</template>

<script>
import { TableTransfer } from 'ant-design-vue'
export default {
  components: { ATableTransfer: TableTransfer },
  data() {
    return {
      dataSource: [],
      targetKeys: []
    }
  }
}
</script>

实现高级功能

对于更复杂的需求，可以考虑以下增强功能：

• 添加全选/全不选按钮
• 实现拖拽排序功能
• 添加搜索过滤功能
• 支持分页加载大数据量
• 添加动画过渡效果

// 示例：添加搜索功能
methods: {
  filterMethod(query, item) {
    return item.name.indexOf(query) > -1
  }
}

性能优化建议

处理大量数据时，考虑以下优化措施：

• 使用虚拟滚动技术
• 实现懒加载
• 减少不必要的响应式数据
• 使用Web Worker处理数据操作

以上方法可以根据具体项目需求进行组合和调整，实现最适合的表格穿梭功能。