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

Vue+sortable+el-table表格排序使用指南

news 2025/7/5 6:25:22

前言

这两天遇到一个需求：在点击【设置优先级】的按钮后弹出关于玩法类型的table，点击【排序】按钮可以后可以进行排序。由于组内使用的组件库是 element-ui，那我首先就想到了使用 el-table组件，但奈何其版本原因不能相应的拖拽排序的API。了解到有sortable.js。接下来我就以Vue+el-table+sortable 为例看看我是怎么实现这个需求的。

在这里插入图片描述

实现思路

从官网的 demo 以及其他文章的操作中基本上实现过程如下：

const tableData = []const _this = thissetTimeout(()=>{Sortable.create(el, {onEnd:function (evt){// evt 可以获取到拖拽 DOM 在拖拽之前和拖拽之后的 index// 利用这个参数就可以对table中的列表排序const list = tableData; // 备份 table 中的数据const currRow = list.splice(evt.oldIndex, 1)[0]; // 获取当前被拖拽的数据list.splice(evt.newIndex, 0, currRow); // 将拖拽的数据从数组中拿出来并插入到新的位置tableData = [] // 置空 table 中的数据nextTick(()=>{tableData = list // 将最新的数据给table})}})
})

但我在实现过程有遇到几个问题。首先，直接如上所示拖拽功能是没问题的，但是在排序的时候如果不加 nextTicke 那么就会出现你明明只将最后一条数据拖拽到第一行，却出现最后两行出现在了最前面…另外，这里使用 setTimeout是为了确保能拿到DOM，毕竟弹窗时不一定能拿到 table DOM。

源码

由于我是两个table，所以使用了 el-tabs，tab切换时会更新 activeName

  function initSort() {const _this = thissetTimeout(() => {const parentEle = _this.$refs.playTypeTabsRefconst tab1 = parentEle .children[0].querySelectorAll('.el-table__body-wrapper > table > tbody')[0]const tab2 = parentEle .children[1].querySelectorAll('.el-table__body-wrapper > table > tbody')[0]const targetTab = this.activeName === 'playType' ? tab1 : tab2const createSortable = () => {Sortable.create(targetTab, {animation: 150,// ghostClass: 'blue-background-class',// handle: 'handle',draggable: '.el-table__row',onEnd: function(evt) {const list: (IPlayTypeItem | ISubPlayTypeItem)[] = _this.activeName === 'playType' ? _this.playTypeList : _this.subPlayTypeListconst currRow: IPlayTypeItem | ISubPlayTypeItem = list.splice(evt.oldIndex, 1)[0]list.splice(evt.newIndex, 0, currRow)_this.activeName === 'playType' ? _this.playTypeList = [] : _this.subPlayTypeList = []_this.$nextTick(() => {if (_this.activeName === 'playType') {_this.playTypeList = list as IPlayTypeItem[]} else {_this.subPlayTypeList = list as ISubPlayTypeItem[]}})}})}createSortable()}, 0)}