当前位置：首页 > news >正文

el-table结合sortablejs实现行拖拽时禁止特定行移动

news 2026/5/12 16:55:04

1. 为什么需要禁止特定行拖拽？

在实际开发中，我们经常会遇到需要固定表头或者某些特殊数据行的场景。比如表格的第一行可能是汇总行，或者某些行包含关键数据不允许用户随意调整顺序。这时候就需要在实现拖拽功能的同时，对特定行进行保护。

我最近在一个后台管理系统项目中就遇到了这样的需求：表格的第一行是统计汇总数据，需要始终固定在顶部不被拖动。刚开始尝试直接用sortablejs实现拖拽时，发现所有行都能被拖动，这显然不符合业务需求。经过一番摸索，终于找到了可靠的解决方案。

2. 基础环境准备

2.1 安装必要依赖

首先确保你的Vue项目中已经安装了Element Plus和sortablejs：

npm install element-plus sortablejs --save

如果你使用的是Vue 2.x版本，需要安装对应版本的Element UI：

npm install element-ui sortablejs --save

2.2 基础表格结构

我们先创建一个基础的el-table组件，包含一些示例数据：

<template> <div class="draggable-container"> <el-table :data="tableData" row-key="id" style="width: 100%" :row-class-name="rowClassName" > <el-table-column prop="name" label="姓名" width="180" /> <el-table-column prop="gender" label="性别" width="180" /> <el-table-column prop="age" label="年龄" /> </el-table> </div> </template> <script setup> import { ref } from 'vue' import Sortable from 'sortablejs' const tableData = ref([ { id: 1, name: '汇总行', gender: '-', age: '-' }, { id: 2, name: '张三', gender: '男', age: 25 }, { id: 3, name: '李四', gender: '女', age: 22 }, { id: 4, name: '王五', gender: '男', age: 30 } ]) </script>

3. 实现拖拽功能的核心逻辑

3.1 初始化sortablejs

在onMounted生命周期钩子中初始化sortablejs：

const rowClassName = ({ row, rowIndex }) => { return rowIndex !== 0 ? 'draggable-row' : 'fixed-row' } onMounted(() => { const tbody = document.querySelector('.draggable-container .el-table__body-wrapper tbody') Sortable.create(tbody, { draggable: '.draggable-row', onEnd({ newIndex, oldIndex }) { const currRow = tableData.value.splice(oldIndex, 1)[0] tableData.value.splice(newIndex, 0, currRow) } }) })

这里的关键点是：

通过rowClassName方法给可拖拽行添加特定类名
在Sortable.create配置中指定只有带有draggable-row类的行可以被拖动

3.2 样式优化

为了让固定行和可拖拽行有更明显的视觉区分，我们可以添加一些CSS：

.fixed-row { background-color: #f5f7fa; cursor: not-allowed; } .draggable-row { cursor: move; }

4. 进阶实现方案

4.1 动态控制可拖拽行

有时候我们需要根据行数据动态决定是否允许拖动，比如只允许管理员拖动某些行：

const rowClassName = ({ row }) => { return row.allowDrag ? 'draggable-row' : 'fixed-row' } const tableData = ref([ { id: 1, name: '汇总行', gender: '-', age: '-', allowDrag: false }, { id: 2, name: '张三', gender: '男', age: 25, allowDrag: true }, { id: 3, name: '李四', gender: '女', age: 22, allowDrag: false }, { id: 4, name: '王五', gender: '男', age: 30, allowDrag: true } ])

4.2 处理多级表头的情况

如果你的表格使用了多级表头，需要调整选择器来正确获取tbody：

onMounted(() => { const tbody = document.querySelector('.draggable-container .el-table__body-wrapper table tbody') // 其余代码保持不变 })

5. 常见问题与解决方案

5.1 拖拽后数据更新不及时

有时候拖拽完成后，表格数据没有及时更新。这是因为Vue的响应式系统可能没有检测到数组变化。解决方案是：

onEnd({ newIndex, oldIndex }) { const newData = [...tableData.value] const [removed] = newData.splice(oldIndex, 1) newData.splice(newIndex, 0, removed) tableData.value = newData }

5.2 固定多行的情况

如果需要固定多行（比如前两行），可以这样修改rowClassName：

const rowClassName = ({ rowIndex }) => { return rowIndex > 1 ? 'draggable-row' : 'fixed-row' }

5.3 拖拽性能优化

当表格数据量较大时，拖拽可能会出现卡顿。可以考虑以下优化措施：

使用虚拟滚动
减少拖拽时的样式计算
对大数据表格进行分页处理

6. 完整代码示例

下面是一个完整的实现示例，包含了所有核心功能：

<template> <div class="draggable-container"> <el-table :data="tableData" row-key="id" style="width: 100%" :row-class-name="rowClassName" > <el-table-column prop="name" label="姓名" width="180" /> <el-table-column prop="gender" label="性别" width="180" /> <el-table-column prop="age" label="年龄" /> </el-table> </div> </template> <script setup> import { ref, onMounted } from 'vue' import Sortable from 'sortablejs' const tableData = ref([ { id: 1, name: '汇总行', gender: '-', age: '-', allowDrag: false }, { id: 2, name: '张三', gender: '男', age: 25, allowDrag: true }, { id: 3, name: '李四', gender: '女', age: 22, allowDrag: true }, { id: 4, name: '王五', gender: '男', age: 30, allowDrag: true } ]) const rowClassName = ({ row }) => { return row.allowDrag ? 'draggable-row' : 'fixed-row' } onMounted(() => { const tbody = document.querySelector('.draggable-container .el-table__body-wrapper tbody') Sortable.create(tbody, { draggable: '.draggable-row', onEnd({ newIndex, oldIndex }) { const newData = [...tableData.value] const [removed] = newData.splice(oldIndex, 1) newData.splice(newIndex, 0, removed) tableData.value = newData } }) }) </script> <style> .fixed-row { background-color: #f5f7fa; cursor: not-allowed; } .draggable-row { cursor: move; } </style>