el-table 表格多行合并，以及序号处理

需求：表格需要进行多行合并，但是序号还是按照自然数来进行显示；

           如果不处理，就显示： 1、2、5、......；处理后就显示：1、2、3、4、5、......；

初始效果，如下图所示：

改进方法：

1. template 表格：序号列显示的值 Nosort 是根据合并后的行数新加的一个属性；

<el-table :data="tableData" class="table-container" height="400" style="width: 100%" v-loading="listLoading" :span-method="arraySpanMethod" :cell-style="listCellStyle">
    <!-- <el-table-column width="80" align="center" type="index" label="序号"></el-table-column> -->
    <el-table-column width="80" align="center" prop="Nosort" label="序号"></el-table-column>
</el-table>

 2. data 中：定义变量存放合并行需要的变量 tableArr、tablePos；

data() {
    return {
        tableData: [],
        
        tableArr: [],
        tablePos: 0
    }
}

3. methods 中：改写两个表格的合并行需要的方法；

getSpanArr(data) {
    // 把需要合并行的归类, data是表格数据
    this.tableArr = []
    this.tablePos = 0
    for (var i = 0; i < data.length; i++) {
        if (i === 0) {
            // 第一行必须存在
            this.tableArr.push(1)
            this.tablePos = 0
        } else {
            if (data[i].id === data[i - 1].id) {
                this.tableArr[this.tablePos] += 1
                this.tableArr.push(0)
            } else {
                this.tableArr.push(1)
                this.tablePos = i
            }
        }
    }
    // 表格序号
    let Nosort = 0
    for(let n in this.tableArr){
        if(this.tableArr[n]>0){
            Nosort += 1
            this.$set(data[n],'Nosort',Nosort)
        }
    }
},

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if(columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 5) {
        // 第一列的合并方法,省
        const row1 = this.tableArr[rowIndex]
        const col1 = row1 > 0 ? 1 : 0 // 如果被合并了_row=0则它这个列需要取消
        return {
            rowspan: row1,
            colspan: col1
        }
    }
}

最终效果，如下图所示：

如果还有其它表格合并相关的问题，欢迎大家留言一起研究学习~~~