vue实现表格穿梭

Vue实现表格穿梭功能

表格穿梭功能通常指在两个表格之间进行数据转移，常见于权限管理、数据筛选等场景。以下是基于Vue的实现方法：

核心实现思路

1. 创建两个表格组件，分别代表源数据和目标数据
2. 使用v-model或props实现数据双向绑定
3. 添加转移按钮逻辑处理数据移动
4. 实现全选/反选功能
5. 添加搜索过滤功能增强用户体验

基础实现代码示例

<template>
  <div class="transfer-container">
    <div class="source-box">
      <h3>源数据</h3>
      <input type="text" v-model="searchQuery" placeholder="搜索...">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="selectAllSource"></th>
            <th>ID</th>
            <th>名称</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in filteredSource" :key="item.id">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="transfer-buttons">
      <button @click="moveToTarget">→</button>
      <button @click="moveToSource">←</button>
    </div>

    <div class="target-box">
      <h3>目标数据</h3>
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="selectAllTarget"></th>
            <th>ID</th>
            <th>名称</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in target" :key="item.id">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      source: [
        { id: 1, name: '选项1', selected: false },
        { id: 2, name: '选项2', selected: false },
        { id: 3, name: '选项3', selected: false }
      ],
      target: [],
      searchQuery: ''
    }
  },
  computed: {
    filteredSource() {
      return this.source.filter(item => 
        item.name.includes(this.searchQuery)
      )
    },
    selectAllSource: {
      get() {
        return this.filteredSource.every(item => item.selected)
      },
      set(value) {
        this.filteredSource.forEach(item => {
          item.selected = value
        })
      }
    },
    selectAllTarget: {
      get() {
        return this.target.every(item => item.selected)
      },
      set(value) {
        this.target.forEach(item => {
          item.selected = value
        })
      }
    }
  },
  methods: {
    moveToTarget() {
      const selectedItems = this.source.filter(item => item.selected)
      this.source = this.source.filter(item => !item.selected)
      this.target = [...this.target, ...selectedItems.map(item => ({
        ...item,
        selected: false
      }))]
    },
    moveToSource() {
      const selectedItems = this.target.filter(item => item.selected)
      this.target = this.target.filter(item => !item.selected)
      this.source = [...this.source, ...selectedItems.map(item => ({
        ...item,
        selected: false
      }))]
    }
  }
}
</script>

<style>
.transfer-container {
  display: flex;
  gap: 20px;
}
.source-box, .target-box {
  flex: 1;
}
.transfer-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

功能扩展建议

1. 拖拽支持
   添加拖拽功能提升用户体验，可使用HTML5 Drag and Drop API或第三方库如vuedraggable

2. 动画效果
   使用Vue的transition组件为数据转移添加平滑动画

3. 分页处理
   当数据量较大时实现分页功能

4. 自定义模板
   允许用户自定义表格列的显示内容

5. 数据验证
   添加转移前的数据验证逻辑

6. 状态保存
   使用Vuex或Pinia管理穿梭框状态

   

性能优化

1. 使用虚拟滚动处理大量数据
2. 对搜索功能进行防抖处理
3. 避免深层响应式数据
4. 使用key属性优化列表渲染

以上实现可以根据实际需求进行调整和扩展，核心在于维护好两个数组之间的数据转移逻辑。