vue table表格拖拽排序

Vue 表格拖拽排序可以使用第三方库 `sortablejs` 来实现。以下是一个简单的示例：

1. 安装 `sortablejs`：

npm install sortablejs

2. 在组件中引入并使用 `sortablejs`：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.id">
          {{ column.title }}
        </th>
      </tr>
    </thead>
    <tbody ref="tableBody">
      <tr v-for="(row, rowIndex) in rows" :key="row.id">
        <td v-for="(column, columnIndex) in columns" :key="column.id">
          {{ row[column.field] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      columns: [
        { id: 1, title: 'Name', field: 'name' },
        { id: 2, title: 'Age', field: 'age' },
        { id: 3, title: 'Gender', field: 'gender' },
      ],
      rows: [
        { id: 1, name: 'John', age: 30, gender: 'Male' },
        { id: 2, name: 'Mary', age: 25, gender: 'Female' },
        { id: 3, name: 'Peter', age: 40, gender: 'Male' },
      ],
    };
  },
  mounted() {
    const tableBody = this.$refs.tableBody;
    new Sortable(tableBody, {
      animation: 150,
      onEnd: (event) => {
        const { oldIndex, newIndex } = event;
        this.rows.splice(newIndex, 0, this.rows.splice(oldIndex, 1)[0]);
      },
    });
  },
};
</script>

在上面的示例中，我们使用 `Sortable` 对象来初始化表格的拖拽排序功能。`onEnd` 回调函数用于在拖拽结束时更新数据中的行顺序。

注意：在 Vue 中使用 `sortablejs` 需要给表格的 `tbody` 元素添加 `ref` 属性，以便能够在组件中引用它。