Vue.Draggable、el-table实现表格拖拽

要在Vue中使用Vue.Draggable和el-table实现表格行的拖拽功能，你需要先安装vuedraggable组件：

npm install vuedraggable

然后在你的Vue组件中使用它：

<template>
  <div>
    <el-table :data="tableData" row-key="id" border>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <draggable v-model="tableData" tag="ul" @end="onDragEnd">
      <li v-for="item in tableData" :key="item.id">
        {{ item.name }}
      </li>
    </draggable>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  data() {
    return {
      tableData: [
        { id: 1, date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles' },
        { id: 2, date: '2016-05-04', name: 'Jane', address: 'No. 189, Grove St, Los Angeles' },
        // ... more data
      ]
    };
  },
  methods: {
    onDragEnd(event) {
      // 拖拽结束后的处理逻辑
    }
  }
};
</script>

在上面的代码中，draggable组件是从vuedraggable导入的，并用来包裹el-table中的行。v-model绑定了表格的数据，这样拖拽操作会实时更新表格数据的顺序。@end事件用来处理拖拽结束后的逻辑，例如更新数据状态或通知后端。

确保你的el-table的:data绑定与draggable的v-model指向同一数组，以保持数据同步。每个表格行都需要有一个唯一的key，在这个例子中是id字段。