当前位置：首页 > VUE

vue 实现表格列拖动

2026-02-22 09:22:34VUE

实现表格列拖动的步骤

在Vue中实现表格列的拖动功能，可以通过HTML5的拖放API结合Vue的数据绑定和事件处理来完成。以下是具体实现方法：

使用HTML5拖放API

HTML5提供了原生的拖放API，可以通过draggable属性、dragstart、dragover和drop事件来实现拖放功能。

<template>
  <table>
    <thead>
      <tr>
        <th
          v-for="(column, index) in columns"
          :key="column.key"
          draggable="true"
          @dragstart="handleDragStart(index)"
          @dragover.prevent="handleDragOver(index)"
          @drop="handleDrop(index)"
        >
          {{ column.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="column.key">
          {{ row[column.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

处理拖放事件

在Vue组件中定义拖放事件的处理函数，更新列的顺序。

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'name', title: 'Name' },
        { key: 'age', title: 'Age' },
        { key: 'address', title: 'Address' },
      ],
      data: [
        { id: 1, name: 'John', age: 25, address: 'New York' },
        { id: 2, name: 'Jane', age: 30, address: 'Los Angeles' },
      ],
      draggedIndex: null,
    };
  },
  methods: {
    handleDragStart(index) {
      this.draggedIndex = index;
    },
    handleDragOver(index) {
      if (this.draggedIndex !== null && this.draggedIndex !== index) {
        const draggedColumn = this.columns[this.draggedIndex];
        const newColumns = [...this.columns];
        newColumns.splice(this.draggedIndex, 1);
        newColumns.splice(index, 0, draggedColumn);
        this.columns = newColumns;
        this.draggedIndex = index;
      }
    },
    handleDrop(index) {
      this.draggedIndex = null;
    },
  },
};
</script>

添加样式增强交互

为拖动的列添加样式，提升用户体验。

<style>
th {
  cursor: move;
  user-select: none;
}
th[draggable="true"] {
  opacity: 0.7;
}
</style>

使用第三方库简化实现

如果项目复杂度较高，可以考虑使用第三方库如vuedraggable来简化实现。

npm install vuedraggable

使用vuedraggable组件：

vue 实现表格列拖动

<template>
  <table>
    <thead>
      <draggable
        v-model="columns"
        tag="tr"
        item-key="key"
        @end="onDragEnd"
      >
        <template #item="{ element }">
          <th :key="element.key">
            {{ element.title }}
          </th>
        </template>
      </draggable>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="column.key">
          {{ row[column.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      columns: [
        { key: 'name', title: 'Name' },
        { key: 'age', title: 'Age' },
        { key: 'address', title: 'Address' },
      ],
      data: [
        { id: 1, name: 'John', age: 25, address: 'New York' },
        { id: 2, name: 'Jane', age: 30, address: 'Los Angeles' },
      ],
    };
  },
  methods: {
    onDragEnd() {
      console.log('Columns reordered:', this.columns);
    },
  },
};
</script>