当前位置：首页 > VUE

vue实现表格拖动

2026-01-07 01:12:24VUE

实现表格拖动的核心方法

使用Vue实现表格拖动功能通常涉及HTML5的拖放API或第三方库。以下是两种常见实现方式：

基于HTML5原生拖放API

在Vue组件中绑定拖放事件实现基础功能：

<template>
  <table>
    <tr 
      v-for="(item, index) in list" 
      :key="item.id"
      draggable="true"
      @dragstart="handleDragStart(index)"
      @dragover.prevent="handleDragOver(index)"
      @drop="handleDrop(index)"
    >
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      list: [...],
      draggedIndex: null
    }
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index
    },
    handleDragOver(index) {
      if (this.draggedIndex !== index) {
        const item = this.list.splice(this.draggedIndex, 1)[0]
        this.list.splice(index, 0, item)
        this.draggedIndex = index
      }
    },
    handleDrop() {
      this.draggedIndex = null
    }
  }
}
</script>

使用Sortable.js库

安装Sortable.js库提供更完善的拖拽功能：

npm install sortablejs --save

在Vue组件中使用：

<template>
  <table ref="table">
    <tr v-for="item in list" :key="item.id">
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      list: [...]
    }
  },
  mounted() {
    this.initSortable()
  },
  methods: {
    initSortable() {
      new Sortable(this.$refs.table, {
        animation: 150,
        onEnd: (evt) => {
          const item = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, item)
        }
      })
    }
  }
}
</script>

跨表格拖动实现

对于需要在多个表格间拖动的场景：

initSortable() {
  const tables = document.querySelectorAll('.sortable-table')
  tables.forEach(table => {
    new Sortable(table, {
      group: 'shared',  // 相同group的表格可互相拖动
      animation: 150,
      onEnd: (evt) => {
        // 处理不同表格间的数据交换
      }
    })
  })
}

性能优化建议

对于大数据量表格，建议使用虚拟滚动技术配合拖动：

npm install vue-virtual-scroller --save

示例实现：

<template>
  <RecycleScroller
    class="table-body"
    :items="list"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="row" draggable="true">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>