秒变大咖！小白也能学会El-Table列拖拽的奥秘

2023-07-14 23:29:27

实现El-Table列拖拽：实用指南

El-Table是Vue.js生态系统中一款备受欢迎的表格组件，但它默认不支持列拖拽，这对于需要根据需求调整列顺序的用户而言十分不便。本文将通过修改el-table-header组件，提供一个实现El-Table列拖拽的实用指南。

列拖拽的实现原理

列拖拽功能的实现需要修改el-table-header组件，它负责渲染表格的表头，包含所有列的标题。通过在el-table-header组件中添加事件监听器，我们可以捕获鼠标事件并实现拖拽行为。

代码实现

<el-table-header>
  <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
    <template slot="header">
      <div @mousedown="startDrag($event, column)">
        {{ column.label }}
      </div>
    </template>
  </el-table-column>
</el-table-header>

methods: {
  startDrag(event, column) {
    this.draggingColumn = column;
    this.dragOffsetX = event.clientX - column.$el.offsetLeft;
  },

  onMouseMove(event) {
    if (!this.draggingColumn) {
      return;
    }

    const newIndex = this.getColumnIndex(event.clientX - this.dragOffsetX);
    if (newIndex !== this.draggingColumn.$index) {
      this.moveColumn(this.draggingColumn.$index, newIndex);
    }
  },

  onMouseUp(event) {
    this.draggingColumn = null;
  },

  moveColumn(oldIndex, newIndex) {
    const columns = this.columns.slice();
    const column = columns.splice(oldIndex, 1)[0];
    columns.splice(newIndex, 0, column);
    this.columns = columns;
  },

  getColumnIndex(clientX) {
    const columns = this.columns;
    for (let i = 0; i < columns.length; i++) {
      const column = columns[i];
      const rect = column.$el.getBoundingClientRect();
      if (clientX >= rect.left && clientX <= rect.right) {
        return i;
      }
    }
    return -1;
  },
}

具体步骤

修改表头模板： 在el-table-column组件的header插槽中添加一个div元素，并绑定mousedown事件处理函数startDrag，该函数记录拖拽列和鼠标与列左边界之间的偏移量。
鼠标移动： 在onMouseMove函数中，如果正在拖拽，则计算出新列索引，如果新索引与拖拽列索引不同，则触发moveColumn函数移动列。
鼠标抬起： 在onMouseUp函数中，将拖拽列重置为null。
移动列： moveColumn函数通过切片操作从columns数组中移除拖拽列，并将其插入到新索引位置。

常见问题解答