el-table实现拖拽排序

el-table是Element UI框架中的一个表格组件，可以用来展示数据。如果需要实现拖拽排序，可以使用el-table内置的sortable属性和drag-sorting事件。

sortable属性可以让表格的行拥有拖拽排序的能力，使用方法如下：

<el-table :data="tableData" :sortable="true">
  <!-- 表格列 -->
</el-table>

drag-sorting事件可以监听行拖拽时的变化，使用方法如下：

<el-table :data="tableData" :sortable="true" @drag-sorting="handleDragSort">
  <!-- 表格列 -->
</el-table>

在事件处理函数中，可以通过参数获取拖拽前和拖拽后的行的数据，然后进行排序操作：

methods: {
  handleDragSort(from, to) {
    const movedData = this.tableData.splice(from, 1)[0];
    this.tableData.splice(to, 0, movedData);
  }
}

以上代码中，我们首先通过splice方法将拖拽前的行数据移除，然后再通过splice方法将该行数据插入到拖拽后的位置。

完整的代码示例：

<template>
  <el-table :data="tableData" :sortable="true" @drag-sorting="handleDragSort">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="gender" label="Gender"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, gender: 'Male' },
        { name: 'Mary', age: 25, gender: 'Female' },
        { name: 'Tom', age: 18, gender: 'Male' },
      ]
    }
  },
  methods: {
    handleDragSort(from, to) {
      const movedData = this.tableData.splice(from, 1)[0];
      this.tableData.splice(to, 0, movedData);
    }
  }
}
</script>