vue2 的el-table表单拖动排序

Vue2的`el-table`组件提供了行拖动排序的功能，这通常用于实现表格行的顺序调整。要实现这个功能，需要使用Element UI提供的`Draggable`指令。以下是一个基本的实现步骤：

1. 在需要实现拖动排序的`el-table`元素上添加`draggable`属性，并指定一个`row-key`属性，这样`Draggable`指令就可以正确地识别和操作行数据。
2. 使用`@start`、`@drag`、`@end`事件来获取拖动操作的开始、进行中和结束时的索引。
3. 根据这些事件提供的信息来更新数据源，以反映行的排序变化。

示例代码如下：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    draggable
    @start="handleDragStart"
    @drag="handleDrag"
    @end="handleDragEnd">
    <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ...其他数据
      ]
    };
  },
  methods: {
    handleDragStart(param) {
      // 拖动开始时的操作
    },
    handleDrag(param) {
      // 拖动进行中的操作，如反馈拖动效果
    },
    handleDragEnd(param) {
      // 拖动结束后的操作，如更新数据源
      let rows = this.$refs.table.store.states.data;
      this.tableData = param.newIndex.map(index => {
        return rows[index];
      });
    }
  }
};
</script>

在这个示例中，我们监听了`handleDragStart`、`handleDrag`和`handleDragEnd`三个事件。当拖动开始时，你可以在这里添加任何你需要的行为。`handleDrag`事件可以用来更新拖动过程中的视觉反馈，而`handleDragEnd`事件则是在拖动结束时更新表格数据的关键。

需要注意的是，`el-table`的拖动排序功能需要依赖`el-table-column`组件，因此每一列都需要放在`el-table`内部。