Vue + Element 树形表格实现拖拽排序，轻松掌握，新手也能轻松上手

引言

树形表格是一种常见的UI组件，广泛应用于各种场景中，如文件管理、组织结构管理、产品分类管理等。与传统表格不同，树形表格可以直观地展示数据的层级关系，从而帮助用户更好地理解和处理数据。

而拖拽排序则是树形表格中常见的一种交互功能，它允许用户通过拖动节点来改变节点的顺序。这种交互方式非常直观，可以极大地提高用户操作的效率。

实现原理

在 Vue + Element UI 中，我们可以使用 v-draggable 指令来实现拖拽排序功能。该指令允许我们在元素上添加拖拽功能，并通过 @dragstart、@dragend 和 @dragover 等事件来监听拖拽的开始、结束和进行中。

当用户开始拖动一个节点时，我们会触发 @dragstart 事件，并在此事件中获取被拖动节点的数据。然后，我们将这些数据存储到一个临时变量中，以便在拖动过程中使用。

当用户拖动节点到另一个节点上时，我们会触发 @dragover 事件。在此事件中，我们可以判断当前被拖动的节点是否可以移动到目标节点下。如果可以，我们会更新临时变量中的数据，以便在拖动结束后将节点移动到目标节点下。

当用户释放鼠标时，我们会触发 @dragend 事件。在此事件中，我们会将临时变量中的数据更新到实际的数据源中，从而完成节点的移动。

代码实现

<template>
  <el-table ref="table" :data="tableData" @row-drag="handleDrag" @row-drop="handleDrop">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.children" :row-key="row => row.id">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="size" label="大小"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="size" label="大小"></el-table-column>
    <el-table-column prop="type" label="类型"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '文件1',
          size: '100KB',
          type: 'txt',
          children: [
            {
              id: 11,
              name: '文件1-1',
              size: '50KB',
              type: 'txt'
            },
            {
              id: 12,
              name: '文件1-2',
              size: '20KB',
              type: 'jpg'
            }
          ]
        },
        {
          id: 2,
          name: '文件2',
          size: '200KB',
          type: 'pdf',
          children: [
            {
              id: 21,
              name: '文件2-1',
              size: '100KB',
              type: 'pdf'
            },
            {
              id: 22,
              name: '文件2-2',
              size: '50KB',
              type: 'doc'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleDrag(row) {
      this.draggedRow = row;
    },
    handleDrop(row) {
      if (this.draggedRow && row !== this.draggedRow) {
        const draggedRowIndex = this.tableData.indexOf(this.draggedRow);
        const dropRowIndex = this.tableData.indexOf(row);
        this.tableData.splice(draggedRowIndex, 1);
        this.tableData.splice(dropRowIndex, 0, this.draggedRow);
      }
    }
  }
}
</script>

在上面的代码中，我们使用 v-draggable 指令在表格行上添加了拖拽功能。当用户开始拖动一个节点时，我们会触发 @dragstart 事件，并在此事件中获取被拖动节点的数据。然后，我们将这些数据存储到 draggedRow 变量中。

当用户拖动节点到另一个节点上时，我们会触发 @dragover 事件。在此事件中，我们会判断当前被拖动的节点是否可以移动到目标节点下。如果可以，我们会更新 draggedRow 变量中的数据，以便在拖动结束后将节点移动到目标节点下。

当用户释放鼠标时，我们会触发 @dragend 事件。在此事件中，我们会将 draggedRow 变量中的数据更新到实际的数据源中，从而完成节点的移动。

总结

在本文中，我们共同学习了如何使用 Vue + Element UI 来实现树形表格的拖拽排序功能。我们不仅学习到了代码的具体实现，还深入理解了背后的原理，帮助大家更好地掌握拖拽排序的技巧。无论您是前端开发新手还是经验丰富的工程师，我们相信您都能从这篇文章中受益匪浅。