利用 SortableJS 赋予 Element-UI el-table 灵活的拖拽排序功能

2023-10-03 11:41:19

在现代前端开发中，用户体验扮演着至关重要的角色。当涉及到交互式表格时，拖拽排序功能可以显著提升用户操作的流畅性和效率。Element-UI 提供了出色的 el-table 组件，但其默认并不支持拖拽排序。为了弥补这一缺陷，我们可以引入 SortableJS，这是一个轻量级的 JavaScript 库，专门用于实现拖拽排序功能。

整合 SortableJS 和 el-table

要将 SortableJS 集成到 el-table 中，我们需要遵循以下步骤：

安装 SortableJS: 通过 npm 或 CDN 安装 SortableJS。
初始化 Sortable: 在 Vue 实例中，使用 $nextTick() 确保 DOM 元素就绪后，使用 Sortable.js 初始化 el-table。
监听拖拽事件: SortableJS 会触发拖拽事件，我们可以监听这些事件来更新表格数据。

更新数据库中的排序

为了持久化排序结果，我们需要在拖拽操作后将排序结果更新到数据库中。我们可以使用以下步骤来实现：

获取排序后的数据: 在拖拽事件中，获取排序后的表格数据。
发送 AJAX 请求: 向服务器发送 AJAX 请求，将排序后的数据发送到后端。
更新数据库: 后端处理请求并更新数据库中的行顺序。

示例代码

<template>
  <el-table :data="tableData" @row-drag-end="onDragEnd">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="order" label="顺序"></el-table-column>
  </el-table>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '苹果', order: 1 },
        { id: 2, name: '香蕉', order: 2 },
        { id: 3, name: '葡萄', order: 3 },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      Sortable.create(this.$el, {
        ghostClass: 'sortable-ghost',
        animation: 150,
        onEnd: this.onDragEnd,
      });
    });
  },
  methods: {
    onDragEnd(evt) {
      // 获取排序后的数据
      const sortedData = this.tableData.slice();

      // 更新排序后的 order 字段
      sortedData.forEach((item, index) => {
        item.order = index + 1;
      });

      // 发送 AJAX 请求更新数据库
      const data = {
        sortedData: sortedData,
      };
      axios.post('/api/update-order', data).then(() => {
        this.$message.success('排序已更新');
      });
    },
  },
};
</script>