ElementuiPlus的table组件实现行拖动与列拖动

在Element UI Plus中，要实现表格的行拖动和列拖动，你可以使用第三方库，如vuedraggable来实现。以下是一个简单的例子，展示如何使用vuedraggable来实现行拖动和列拖动。

首先，确保你已经安装了element-plus和vuedraggable：

npm install element-plus vuedraggable

然后，你可以在你的组件中这样使用它们：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      v-for="item in dynamicColumns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label">
    </el-table-column>
  </el-table>
</template>
 
<script>
import { ref } from 'vue';
import { Table, TableColumn } from 'element-plus';
import 'element-plus/dist/index.css';
import draggable from 'vuedraggable';
 
export default {
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    draggable,
  },
  setup() {
    const tableData = ref([
      // ... 填充你的数据
    ]);
 
    const dynamicColumns = ref([
      // ... 定义你的列属性
    ]);
 
    return {
      tableData,
      dynamicColumns,
    };
  },
};
</script>

对于行拖动，你可以使用draggable组件包裹el-table的el-table-body标签：

<draggable v-model="tableData" tag="div">
  <el-table-body></el-table-body>
</draggable>

对于列拖动，你可以使用draggable组件包裹el-table-column：

<draggable v-model="dynamicColumns" tag="div">
  <el-table-column
    v-for="item in dynamicColumns"
    :key="item.prop"
    :prop="item.prop"
    :label="item.label">
  </el-table-column>
</draggable>

请注意，draggable组件需要一个数组作为它的v-model，所以tableData和dynamicColumns需要是响应式的。

确保你已经正确安装并导入了vuedraggable，并且在你的vuedraggable组件上设置了tag属性，以便它可以正确渲染为HTML元素。

这个例子提供了行拖动和列拖动的基本实现，你可以根据自己的需求进一步定制和优化。