使用 VueGraggablePlus 实现 el-table 等第三方组件的拖拽排序

<template>
  <div>
    <vue-draggable-plus
      v-model="tableData"
      :options="{group:'name'}"
      @end="onDragEnd"
    >
      <el-table :data="tableData" row-key="id" border>
        <el-table-column
          v-for="item in tableHeader"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        ></el-table-column>
      </el-table>
    </vue-draggable-plus>
  </div>
</template>
 
<script>
import Vue from 'vue';
import VueDraggablePlus from 'vue-draggable-plus';
import 'element-ui/lib/theme-chalk/index.css';
import { Table, TableColumn } from 'element-ui';
 
Vue.use(Table);
Vue.use(TableColumn);
 
export default {
  components: {
    VueDraggablePlus,
  },
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 30 },
        { id: 2, name: 'Jane', age: 25 },
        { id: 3, name: 'Doe', age: 20 },
      ],
      tableHeader: [
        { label: 'Name', prop: 'name' },
        { label: 'Age', prop: 'age' },
      ],
    };
  },
  methods: {
    onDragEnd(event) {
      const { oldIndex, newIndex } = event;
      const movedItem = this.tableData.splice(oldIndex, 1)[0];
      this.tableData.splice(newIndex, 0, movedItem);
    },
  },
};
</script>

这个代码示例展示了如何在Vue应用中使用vue-draggable-plus和element-ui的el-table组件实现行的拖拽排序功能。vue-draggable-plus组件提供了拖拽功能，onDragEnd方法在拖拽操作结束时更新表格数据的顺序。