element中的表格 拖拽排序 怎么实现 并且要实现能获取到改变位置的数据 能进行保存

在前端技术中，Element UI是一个基于Vue.js的组件库，它提供了一套完整的界面组件。在Element UI中，表格组件支持了拖拽排序的功能，这通常可以通过以下步骤实现：

1. 使用Element UI提供的`<el-table>`组件，并开启其`draggable`属性以启用拖拽功能。

2. 给表格的每一行添加一个唯一的`row-key`，这是必要的，因为Element UI的表格组件会使用这个`row-key`来识别每一行。

3. 设置`<el-table-column>`中的`label`属性来显示列的标题，并且可以为这一列添加操作按钮。

4. 使用`<el-table-column>`中的`reserve-selection`属性可以保持表格数据的选中状态。

5. 为了能够获取到拖拽后的新顺序和保存数据，你需要监听表格的`sort-change`事件，该事件会在拖拽排序结束后触发。

6. 在事件处理函数中，你可以通过事件对象或者直接访问表格的`store`属性来获取到当前表格的顺序信息，并执行相应的数据保存逻辑。

下面是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    draggable
    @sort-change="handleSortChange">
    <el-table-column
      v-for="prop in tableColumns"
      :key="prop.prop"
      :prop="prop.prop"
      :label="prop.label">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 你的数据
      ],
      tableColumns: [
        // ... 列配置
      ]
    };
  },
  methods: {
    handleSortChange(newSortedData) {
      console.log('新的排序数据：', newSortedData);
      // 这里可以实现数据的保存逻辑
      // 比如，你可以把 newSortedData 发送到后端API进行保存
    }
  }
};
</script>

在上述代码中，`handleSortChange`方法会在排序发生变化时被调用，你可以在这个方法中获取到新的排序后的数据数组`newSortedData`，并执行数据保存的相关操作。