Element Plus 表格拖拽排序方案

web网页精选

已于 2025-04-16 16:20:03 修改

阅读量1.4k

点赞数 16

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2025-04-16 16:19:33 首次发布

本文链接：https://blog.csdn.net/qq_43770056/article/details/147279673

一、选择建议

1. Element Plus 的 el-table + Sortable.js

适用场景：
- 项目已深度依赖 Element Plus，不希望引入新组件库
- 需要高度定制化拖拽逻辑（如仅部分行可拖拽、拖拽后异步提交等）
- 对性能要求较高，需手动优化 DOM 操作
优点：
- 无缝集成 Element Plus 生态，无需额外学习新组件 API
- 通过 Sortable.js 灵活控制拖拽细节（动画、占位样式等）
缺点：
- 需手动处理 DOM 和数据同步（如 splice 更新数组）
- 拖拽功能需依赖第三方库（Sortable.js）

2. Vxe Table

适用场景：
- 新项目或允许引入新组件库
- 需要开箱即用的拖拽功能（行、列拖拽均可）
- 追求开发效率，希望减少底层逻辑代码
优点：
- 内置拖拽排序功能，仅需配置 row-config.drag 即可开启
- 支持行列同时拖拽，且无需处理 DOM 和数据同步
- 提供更丰富的表格功能（如虚拟滚动、树形结构）
缺点：
- 需额外安装 Vxe 组件库，可能增加包体积
- 定制化程度较低（如拖拽样式需覆盖默认 CSS）

二、实现方案对比

方案 1：el-table + Sortable.js（适合已有 Element Plus 项目）

安装依赖：npm install sortablejs --save
绑定表格与拖拽逻辑：

<template>
  <el-table 
    :data="tableData" 
    row-key="id" 
    class="draggable-table"
  >
    <!-- 列定义 -->
  </el-table>
</template>

<script setup>
import Sortable from 'sortablejs';
import { onMounted, ref } from 'vue';

const tableData = ref([...]); // 表格数据
const tableRef = ref(); // 表格实例

onMounted(() => {
  const tbody = tableRef.value.$el.querySelector('.el-table__body-wrapper tbody');
  Sortable.create(tbody, {
    animation: 150,
    onEnd: ({ oldIndex, newIndex }) => {
      const currRow = tableData.value.splice(oldIndex, 1)[0];
      tableData.value.splice(newIndex, 0, currRow);
      // 提交后端（可选）
      submitNewOrder(tableData.value);
    }
  });
});
</script>

关键点：

表格需设置 row-key 保证唯一性

通过 splice 更新数组实现数据同步

方案 2：Vxe Table（适合新项目或功能复杂场景）

安装依赖：npm install vxe-table@4.9.0

配置拖拽功能：

<template>
  <vxe-grid 
    :data="tableData" 
    :row-config="{ useKey: true, drag: true }"
  >
    <vxe-column type="seq" title="序号"></vxe-column>
    <vxe-column field="name" title="名称" drag-sort></vxe-column>
  </vxe-grid>
</template>

关键点：

开启 row-config.drag 和 drag-sort 属性

数据自动同步，无需手动更新数组