前言

sortablejs配合el-table实现表格拖拽，网上的文章一抓一大把，大部分都是单行拖拽的demo，这里讲下行合并后的el-table，怎么配合sortablejs这个库来实现拖拽

先上张图

如图，这两行在头部红色部分，使用el-table提供的方式合并成了一行，为一组，我们要实现的就是组拖拽。

1、首先安装sortablejs这个库

npm install sortablejs -D

2.组件中引入这个库

import Sortable from 'sortablejs'

3.给上row-key属性

4.这里单独给了一列支持拖拽行

5.代码

init () {
    let oldIndex,
        oldRowName = '',
        newRowName = '',
        newIndex = 0;

    let el =  document.querySelector(".pj-service-table .el-table__body-wrapper tbody");
    new Sortable(el, {
        handle:'.drag',
        draggable:'.el-table__row',
        onStart: (e) => {
            oldIndex = e.oldIndex // 初始位置
        },
        onMove: customEvent => {
            newIndex = customEvent.related.rowIndex; // 目标位置
            oldRowName = this.pjTableData[oldIndex].taskName
            newRowName = this.pjTableData[newIndex].taskName

            return false;
        },
        onEnd: (e) => {
            const length = this.pjTableData.length
            if (newIndex !== 0 && newIndex !== length - 1) {

                // 目前组拖拽只支持两行
                if (oldRowName.includes('Drop Off')) { // 拖拽Drop Off
                    const dragRow = this.pjTableData.splice(oldIndex, 2);
                    if (newRowName.includes('Drop Off')) { // 组对组
                        this.pjTableData.splice(newIndex, 0, ...dragRow)
                    } else { // 组对单
                        newIndex = newIndex > oldIndex ? newIndex - 1 : newIndex  // 判断向上向下
                        this.pjTableData.splice(newIndex, 0, ...dragRow)
                    }
                } else { // 普通单行拖拽
                    if (newRowName.includes('Drop Off')) { // 判断落点
                        const dragRow = this.pjTableData.splice(oldIndex, 1);

                        if (newIndex < oldIndex) { // 向上拖拽
                            this.pjTableData.splice(newIndex - 1, 0, ...dragRow)
                        } else { // 向下拖拽
                            this.pjTableData.splice(newIndex + 1, 0, ...dragRow)
                        }
                    } else {
                        const dragRow = this.pjTableData.splice(oldIndex, 1);
                        this.pjTableData.splice(newIndex, 0, ...dragRow)
                    }
                }

                newIndex = 0 // 每次拖拽完置为默认值
            }
        },
    })
}

这里根据taskName（前端自己维护的字段）判断单行拖拽，还是组拖拽，一组（也就是两行）中间是不能插入单行的，还要判断单拖组，组拖单，以及组拖组，另外还要分别判断往上拖还是往下拖。

ps：真的难顶

最后虽然实现了拖拽功能，但是样式上有些问题，如图

el-table的这个行合并，只在头尾做了，中间本质上还是两行数据，所以拖得时候才会只托起上面这一行，也就是要写那么多判断的原因

看下el-table的合并表格示例

可以看到他确实只是合并了单元格，而非整行，选中也是选中了上一行

难受哇，太难受了

其实有一种技术方案就是，用单行实现，这一组其实是一行数据，这样做就very简单了，但是数据结构要改，后端也要改，而且这个表格已经深度继承了好多功能- - 要考虑开发成本

寄！

sortablejs实现el-table合并行后的拖拽

前言