vuedraggable 能和el-table结合使用

vuedraggable 是一个基于 Vue.js 的拖拽组件，可以用来创建可拖拽的列表。而 el-table 是 Element UI 组件库中的表格组件，也是基于 Vue.js 的。

要使 vuedraggable 和 el-table 结合工作，可以将 vuedraggable 组件作为 el-table 的子组件来使用，以实现表格行的拖拽功能。

以下是一个简单的例子：

<template>
  <el-table :data="tableData" row-key="id">
    <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" @start="drag=true" @end="drag=false">
    <li v-for="item in tableData" :key="item.id">
      {{ item.name }}
    </li>
  </draggable>
</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
      ],
      drag: false
    };
  }
};
</script>

在这个例子中，draggable 组件被用来创建一个可拖拽的列表，其中的 v-model 绑定了与 el-table 的 :data 绑定相同的数组 tableData。每次拖拽操作后，tableData 数组的顺序将会自动更新，以反映拖拽后的新顺序。