vuedraggable示例_vue.draggable实现表格拖拽排序效果

下面是一个简单的示例，使用 `vue.draggable` 实现表格的拖拽排序效果：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <draggable v-model="items" :options="{handle:'.drag-handle'}">
          <tr v-for="(item, index) in items" :key="item.id">
            <td class="drag-handle">☰</td>
            <td>{{ item.name }}</td>
            <td>{{ item.quantity }}</td>
          </tr>
        </draggable>
      </tbody>
    </table>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { id: 1, name: '商品1', quantity: 10 },
        { id: 2, name: '商品2', quantity: 20 },
        { id: 3, name: '商品3', quantity: 30 }
      ]
    };
  }
};
</script>

<style>
.drag-handle {
  cursor: move;
}
</style>

在上面的示例中，我们使用了 `vuedraggable` 组件，并将需要排序的行绑定到 `items` 数据属性上。我们可以通过设置 `options` 属性来配置拖拽的句柄，这里我们使用了一个 `drag-handle` 类来实现。

当我们拖动表格行时，`vuedraggable` 会自动更新 `items` 数组的顺序。我们可以在 `items` 数组变化时执行一些操作，例如向后端发送请求更新数据库中的排序等。