Vue3 + El-Plus 实现表格行拖拽功能

<template>
  <el-table
    :data="tableData"
    row-key="id"
    border
    @row-drop="onRowDrop"
    draggable
    @drag-start="onDragStart"
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        // ... 其他列定义
      ],
      tableData: [
        { id: 1, name: '小明', age: 18 },
        { id: 2, name: '小红', age: 20 },
        // ... 其他数据行
      ],
    };
  },
  methods: {
    onRowDrop(draggedRow, droppedRow, dropType) {
      const draggedRowIndex = this.tableData.findIndex((row) => row.id === draggedRow.id);
      const droppedRowIndex = this.tableData.findIndex((row) => row.id === droppedRow.id);
 
      this.tableData.splice(droppedRowIndex, 0, ...this.tableData.splice(draggedRowIndex, 1));
    },
    onDragStart(event, row) {
      event.dataTransfer.setData('rowId', row.id);
    },
  },
};
</script>

这个代码实例展示了如何在Vue 3和Element Plus中实现表格行的拖拽功能。它定义了一个带有row-drop和draggable属性的表格，以及相应的方法来处理行拖拽事件。onRowDrop方法用于在拖拽操作后更新表格数据源，onDragStart方法用于设置拖拽开始时的数据。这个例子简洁明了，并且注重于实现核心功能，而不失去其可读性和可维护性。