vue3 使用element-plus 组件 里面的el-tabe 如何可以让里面可以拖拽 改变顺序

要实现el-table内的拖拽改变顺序功能，可以借助element-plus中的el-draggable组件。具体实现步骤如下：

1. 安装el-draggable组件

npm install vuedraggable --save

2. 在vue组件中引入el-draggable和el-table组件

<template>
  <el-draggable v-model="tableData">
    <el-table :data="tableData" :columns="tableColumns">
      ...
    </el-table>
  </el-draggable>
</template>

<script>
import draggable from "vuedraggable";
import { ElTable, ElTableColumn } from "element-plus";

export default {
  components: {
    draggable,
    ElTable,
    ElTableColumn,
  },
  data() {
    return {
      tableData: [
        ...
      ],
      tableColumns: [
        ...
      ],
    };
  },
};
</script>

3. 在el-table中指定row-key属性

<el-table :data="tableData" :columns="tableColumns" row-key="id">
  ...
</el-table>

4. 在el-draggable中指定tag属性为"tbody"

<el-draggable v-model="tableData" tag="tbody">
  <el-table :data="tableData" :columns="tableColumns" row-key="id">
    ...
  </el-table>
</el-draggable>

5. 在el-draggable中指定move事件处理函数

<el-draggable v-model="tableData" tag="tbody" :move="handleMove">
  <el-table :data="tableData" :columns="tableColumns" row-key="id">
    ...
  </el-table>
</el-draggable>

...

methods: {
  handleMove(e) {
    // 获取当前拖拽行和目标行的索引
    const sourceIndex = e.draggedContext.index;
    const targetIndex = e.relatedContext.index;

    // 交换拖拽行和目标行在tableData中的位置
    const temp = this.tableData[sourceIndex];
    this.tableData.splice(sourceIndex, 1);
    this.tableData.splice(targetIndex, 0, temp);
  },
},

通过以上步骤，就可以实现el-table内的拖拽改变顺序功能。