vue+elementUI实现表格行拖拽到其它区域（无需插件）

在Vue中使用Element UI实现表格行的拖拽功能，可以通过原生JavaScript的拖放API来实现。以下是一个简单的示例，展示了如何在不使用任何插件的情况下实现表格行的拖拽功能。

<template>
  <el-table
    :data="tableData"
    row-key="id"
    @row-dragstart="onRowDragStart"
    @row-drop="onRowDrop"
    @row-dragover="onRowDragOver"
    @row-dragend="onRowDragEnd"
    draggable
  >
    <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: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
      ],
      tableData: [
        { id: 1, date: '2016-05-02', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },
        { id: 2, date: '2016-05-04', name: '李四', address: '上海市普陀区金沙江路 1517 弄' },
        { id: 3, date: '2016-05-01', name: '王五', address: '上海市普陀区金沙江路 1519 弄' },
        // ...
      ],
      draggingRow: null,
    };
  },
  methods: {
    onRowDragStart(row, event) {
      this.draggingRow = row;
    },
    onRowDragOver(event) {
      event.preventDefault();
    },
    onRowDrop(event, row) {
      const oldIndex = this.tableData.findIndex((item) => item.id === this.draggingRow.id);
      const newIndex = this.tableData.findIndex((item) => item.id === row.id);
      this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0]);
    },
    onRowDragEnd(row, event) {
      this.draggingRow = null;
    },
  },
};
</script>

在这个例子中，我们使用了el-table组件的几个与拖放相关的属性：

• @row-dragstart="onRowDragStart" 当开始拖动行时触发。
• @row-drop="onRowDrop" 当拖动的行放置在新位置时触发。
• @row-dragover="onRowDragOver" 当拖动的行经过可放置目标时触发，用于防止默认行为。
• @row-dragend="onRowDragEnd" 当拖动结束时触发。

draggable属性使得表格行可以被拖动。onRowDragStart方法记录当前拖动的行，onRowDrop方法在拖动结束时处理行的重新排序，更新tableData数组的顺序。这样就实现了表格行的拖拽排序功能。