Vue3 中使用 Sortablejs 实现拖拽排序功能 序号不更新问题

Vue3 中使用 Sortablejs 实现拖拽排序功能 序号不更新问题

1. 安装依赖

  npm install sortablejs --save

2. 简单使用

<template><div class="app-container"><div class="table-header"><el-button type="primary" @click="handleAdd">添加</el-button></div><el-table :data="tableData" row-key="code"><el-table-column width="50"><template #default><el-icon class="drag-handle"><Operation /></el-icon></template></el-table-column><el-table-column label="序号" width="80" align="center"><template #default="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="name" label="名称"></el-table-column></el-table></div>
</template><script setup>
import { ref, onMounted, nextTick } from 'vue'
import Sortable from 'sortablejs'const tableData = ref([{ code: 1, name: '项目1' },{ code: 2, name: '项目2' },{ code: 3, name: '项目3' }
])// 添加数据方法
const handleAdd = () => {const newData = {code: Date.now(),name: '新项目' + (tableData.value.length + 1)}tableData.value.push(newData)
}// 记录滚动位置
const scrollTopTemp = ref(0)onMounted(() => {const el = document.querySelector('.el-table__body-wrapper tbody')if (!el) returnSortable.create(el, {handle: '.drag-handle',  // 拖拽句柄animation: 150,  // 动画过渡时间onEnd({ newIndex, oldIndex }) {const currRow = tableData.value.splice(oldIndex, 1)[0]tableData.value.splice(newIndex, 0, currRow)}})
})
</script><style scoped>
.table-header {margin-bottom: 20px;
}.drag-handle {cursor: move;font-size: 20px;color: #909399;
}:deep(.el-table__row) {cursor: move;
}
</style>

3. 有时因为嵌套原因，或者循环创建会造成 序号不更新的情况 解决方法如下

    onEnd({ newIndex, oldIndex }) {const listTemp = [...tableData.value]const currRow = listTemp.splice(oldIndex, 1)[0]listTemp.splice(newIndex, 0, currRow)// 使用 nextTick 确保数据更新后再设置滚动位置tableData.value = []nextTick(() => {tableData.value = listTemp})}

4. 该方法会解决序号刷新问题 但是会造成表格重置 导致 滚动条回到顶部 解决如下

  Sortable.create(el, {handle: '.drag-handle',  // 拖拽句柄animation: 150,  // 动画过渡时间onStart() {// 记录滚动位置// 这里需要注意你的滚动元素 是那个 我的是html标签 scrollTopTemp.value = document.documentElement.scrollTop},onEnd({ newIndex, oldIndex }) {const currRow = tableData.value.splice(oldIndex, 1)[0]tableData.value.splice(newIndex, 0, currRow)// 使用 nextTick 确保数据更新后再设置滚动位置tableData.value = []nextTick(() => {tableData.value = listTempnextTick(() => {// 这里需要注意你的滚动元素 是那个 我的是html标签 document.documentElement.scrollTop = scrollTopTemp.value})})}})

5. 注意： 弹窗中的表格拖拽 请在 每次弹窗打开后面进行初始化。

6. 完成！