Vue + Element UI el-table 行、列拖拽排序

### 实现 Vue 和 Element UI 中 `el-table` 组件的行和列拖拽排序 #### 行拖拽排序 为了实现行拖拽排序，在 HTML 部分，需要配置 `el-table` 的一些必要属性： - 添加 `ref` 属性以便 JavaScript 可以访问组件实例。 - 设置唯一的 `row-key` 来标识每一行的数据项。 对于拖拽操作的具体实施，可以通过引入 Sortable.js 库来增强原生的功能。以下是具体的代码示例： ```html <template> <div> <!-- 定义表格 --> <el-table :data="tableData" ref="dragTable" row-key="id"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="value" label="数值"></el-table-column> <el-table-column class-name="allowDrag" align="center" width="80px"> <i slot-scope="{ row }" @click="handleRowClick(row)" class="el-icon-drag-dot"/> </el-table-column> </el-table> </div> </template> <script> import { Table, TableColumn } from 'element-ui'; import Sortable from 'sortablejs'; export default { components: { ElTable: Table, ElTableColumn: TableColumn }, data() { return { tableData: [ { id: 1, name: "Item A", value: "Value A" }, { id: 2, name: "Item B", value: "Value B" } ] }; }, mounted() { const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]; this.sortable = Sortable.create(el, { ghostClass: 'sortable-ghost', // Class name for the drop placeholder onEnd: evt => { const targetRow = this.tableData.splice(evt.oldIndex, 1)[0]; this.tableData.splice(evt.newIndex, 0, targetRow); // 更新到服务器或其他逻辑处理... } }); }, methods: { handleRowClick(row) { console.log('点击了:', row); } } }; </script> <style scoped> .sortable-ghost{ opacity: .8; color: #fff!important; background: red !important; } </style> ``` 上述代码实现了基于 `SortableJS` 的行拖拽效果，并通过自定义事件监听器捕获拖放完成后的索引变化并调整数组顺序[^1]。 #### 列拖拽排序 针对列的重新排列，则主要依赖于 `ElementUI` 自身提供的插槽机制以及 CSS 类名控制。这里的关键在于利用 `header-cell-class-name` 或者直接修改表头单元格样式的方式指定哪些列为可拖动状态。不过需要注意的是，官方并没有直接支持列间互换位置的操作，因此可能还需要借助第三方库如 `draggable` 或者手动编写相应逻辑来进行交互设计。 由于涉及到更复杂的 DOM 操作与样式管理，建议开发者先熟悉基础的行级拖拽案例后再尝试扩展至列级别的功能开发。