vue table 表格拖拽排序

使用 Vue.js 实现表格拖拽排序的方法如下：

1. 安装依赖

npm install vue-draggable --save

2. 引入依赖

在需要使用的组件中引入 `vue-draggable`：

import draggable from 'vuedraggable'

3. 使用 `vue-draggable` 实现表格拖拽排序

HTML 代码：

<draggable v-model="tableData">
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>数量</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.amount }}</td>
      </tr>
    </tbody>
  </table>
</draggable>

JavaScript 代码：

import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      tableData: [
        { name: '商品1', amount: 10 },
        { name: '商品2', amount: 20 },
        { name: '商品3', amount: 30 }
      ]
    }
  }
}

这样，就可以通过拖拽表格行来实现表格排序了。