vue2 vuedraggable table

Vue2 Vuedraggable Table是一个基于Vue.js的可拖拽表格组件，它可以让你轻松地实现表格的拖拽排序和列宽调整功能。

该组件的主要特点包括：
1. 可以通过拖拽行来实现表格的排序功能，用户可以自由调整表格中行的顺序。
2. 可以通过拖拽表头来调整表格列的宽度，用户可以根据需要调整每列的宽度。
3. 支持自定义表格样式和样式类名，可以根据项目需求进行个性化定制。
4. 提供了丰富的事件和方法，方便开发者进行扩展和定制。

使用Vuedraggable Table，你可以快速构建一个具有拖拽排序和列宽调整功能的表格，提升用户的交互体验和操作效率。

相关问题

vue el-table拖动排序

Vue中的el-table可以通过拖拽来实现表格的排序。实现方法有多种，其中一种是使用vuedraggable插件。另外，也可以使用sortablejs来实现行拖拽和列拖拽。在使用el-table时，需要注意指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。同时，row-key不可用index，因为拖拽后index会变，会有问题。

vue3 table拖拽排序

Vue3 Table拖拽排序可以通过以下步骤实现：

1. 安装`vuedraggable`插件：`npm install vuedraggable`

2. 在Vue组件中引入`vuedraggable`插件：

<template>
  <div>
    <draggable v-model="tableData" :options="{handle:'.drag-handle'}">
      <table>
        <thead>
          <tr>
            <th class="drag-handle"></th>
            <th>名称</th>
            <th>日期</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td class="drag-handle"></td>
            <td>{{ item.name }}</td>
            <td>{{ item.date }}</td>
            <td>{{ item.status }}</td>
          </tr>
        </tbody>
      </table>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      tableData: [
        { name: '任务1', date: '2021-01-01', status: '进行中' },
        { name: '任务2', date: '2021-01-02', status: '已完成' },
        { name: '任务3', date: '2021-01-03', status: '已取消' },
        { name: '任务4', date: '2021-01-04', status: '进行中' },
      ],
    };
  },
};
</script>

3. 给表头和表格行添加可拖拽的手柄，使其可以被拖拽。

4. 配置`vuedraggable`插件的`options`属性，设置拖拽手柄的类名为`.drag-handle`，以确保只有手柄才能被拖拽。

5. 使用`v-model`绑定`tableData`，使其能够响应拖拽排序。

6. 在拖拽完成后，可以通过监听`onEnd`事件来获取排序后的数据：

<draggable
  v-model="tableData"
  :options="{handle:'.drag-handle'}"
  @end="onEnd"
>
  ...
</draggable>

methods: {
  onEnd(event) {
    console.log(this.tableData); // 输出排序后的数据
  },
},