简单实现el-table行的拖拽

<template>
  <div>
    <el-table
      ref="table"
      :data="sortedData"
      border
    >
      <el-table-column
        prop="name"
        label="Name"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="Age"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="Address"
        width="180"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      // 初始数据
      tableData: [
        { id: 1, name: 'John Doe', age: 28, address: 'New York' },
        { id: 2, name: 'Jane Smith', age: 34, address: 'London' },
        { id: 3, name: 'Jack Johnson', age: 45, address: 'Sydney' },
      ]
    };
  },
  computed: {
    sortedData() {
      return this.tableData;
    }
  },
  mounted() {
    this.initSortable();
  },
  methods: {
    initSortable() {
      const tableBody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody');
      
      Sortable.create(tableBody, {
        handle: '.el-table__row',
        onEnd: (event) => {
          const movedItem = this.tableData.splice(event.oldIndex, 1)[0];
          this.tableData.splice(event.newIndex, 0, movedItem);
        }
      });
    }
  }
};
</script>

<style scoped>
/* 你可以根据需要自定义拖拽的样式 */
</style>