使用 Element UI 和 SortableJS 实现 el-table 拖拽排序

本文将介绍如何在使用 Element UI 的 Vue 应用中，结合 SortableJS 库，为 el-table 组件添加拖拽排序功能。

在开始之前，确保你的项目中已经安装了 Element UI 和 SortableJS。如果尚未安装，可以通过以下命令进行安装：

npm install element-ui sortablejs

实现步骤

第一步：创建基础表格

首先，我们需要一个基本的 el-table。这个表格将展示一些可排序的数据。下面是一个简单的表格示例：

第二步：引入 SortableJS 并初始化

接下来，我们需要通过 SortableJS 使 el-table 的行变得可拖拽。这需要在 Vue 组件的 mounted 钩子中完成：

import Sortable from 'sortablejs';

export default {
  mounted() {
    this.initSortable();
  },
  methods: {
    initSortable() {
      const el = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper tbody');
      Sortable.create(el, {
        handle: '.drag-handle',
        animation: 150,
        onEnd: this.handleDragEnd,
      });
    },
    handleDragEnd(evt) {
      // 拖拽结束后的处理逻辑
    },
  },
};

在这个例子中，我们通过查询选择器找到 el-table 的 tbody 元素，并对它应用 Sortable.create 方法使其成为可拖拽的。我们还定义了 handleDragEnd 方法来处理拖拽结束后的逻辑，例如更新数据顺序。

第三步：更新数据顺序

拖拽结束后，我们需要根据拖拽结果更新表格数据的顺序。这可以通过修改 handleDragEnd 方法来实现：

handleDragEnd(evt) {
  const { oldIndex, newIndex } = evt;
  const movedItem = this.tableData.splice(oldIndex, 1)[0];
  this.tableData.splice(newIndex, 0, movedItem);
}

在这里，我们使用 splice 方法从数组中移除被拖拽的项，并将其插入到新的位置。

第四步：添加拖拽把手

为了提高用户体验，我们可以为每一行添加一个拖拽把手，让用户知道哪里可以拖拽。这可以通过添加一个新的 el-table-column 来实现：