当前位置：首页 > VUE

vue实现拖拽表格

2026-03-29 18:02:09VUE

Vue 实现拖拽表格的方法

使用 `vuedraggable` 库

安装 vuedraggable 库：

npm install vuedraggable

在 Vue 组件中引入并使用：

vue实现拖拽表格

<template>
  <draggable v-model="list" tag="table" class="table">
    <tr v-for="(item, index) in list" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
    };
  },
};
</script>

使用 HTML5 原生拖拽 API

通过 HTML5 的 draggable 属性和 Vue 的事件监听实现拖拽：

vue实现拖拽表格

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
      draggedIndex: null,
    };
  },
  methods: {
    handleDragStart(event, index) {
      this.draggedIndex = index;
    },
    handleDrop(event, targetIndex) {
      const movedItem = this.list.splice(this.draggedIndex, 1)[0];
      this.list.splice(targetIndex, 0, movedItem);
    },
  },
};
</script>

拖拽表格列的排序

如果需要拖拽表格列（调整列顺序），可以使用 vuedraggable 结合 thead 和 tbody：

<template>
  <table>
    <draggable v-model="headers" tag="thead" item-key="key">
      <tr>
        <th v-for="header in headers" :key="header.key">{{ header.text }}</th>
      </tr>
    </draggable>
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td v-for="header in headers" :key="header.key">{{ item[header.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      headers: [
        { key: 'name', text: 'Name' },
        { key: 'age', text: 'Age' },
      ],
      list: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
    };
  },
};
</script>

拖拽表格行并保存顺序

如果需要保存拖拽后的顺序到后端，可以在拖拽结束时触发保存操作：

<template>
  <draggable v-model="list" tag="table" @end="saveOrder">
    <tr v-for="(item, index) in list" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
    };
  },
  methods: {
    saveOrder() {
      const newOrder = this.list.map((item, index) => ({
        id: item.id,
        order: index + 1,
      }));
      // 调用 API 保存顺序
      console.log('New order:', newOrder);
    },
  },
};
</script>