Element table组件单元格合并（纵向）

一、计算

1.HTML

<div class="lomeo-table-content">
                            <el-table :data="rdata" :span-method="spanMethod" border style="width: 100%">
                                <el-table-column prop="category" label="类别" width="30">
                                    <template slot-scope="scope">
                                        <div v-html="zongxiang(scope.row.category)"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="order" label="序号" width="30"></el-table-column>
                                <el-table-column prop="evalu" label="项目" width="30">
                                    <template slot-scope="scope">
                                        <div v-html="evaluFormatter(scope)"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="tplContent" label="考评内容" width="340"></el-table-column>
                                <el-table-column prop="quantiNml.name" label="量化标准" width="100"></el-table-column>
                                <el-table-column prop="evaluNml.name" label="考评标准" width="100"></el-table-column>
                                <el-table-column prop="response" label="落实情况" width="240">
                                    <template slot-scope="scope">
                                        <div v-html="respFormatter(scope)"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dftDec" label="默认扣分" width="60">
                                    <template slot-scope="scope">
                                        <div v-html="decFormatter(scope,0)"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="selfDec" label="自评扣分" width="60">
                                    <template slot-scope="scope">
                                    <div v-html="decFormatter(scope,1)"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dptDec" label="主管部门扣分" width="60">
                                    <template slot-scope="scope">
                                        <div v-html="decFormatter(scope,2)"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="leadDec" label="主管领导扣分" width="60">
                                    <template slot-scope="scope">
                                        <div v-html="decFormatter(scope,3)"></div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="tool" label="#" width="60"></el-table-column>
                            </el-table>

2.对源数据进行计算

                        /**
                         * 初始化合并参数表
                         */
                        var cols = [
                            {
                                name: 'category', //参与计算的列名，必须和el-table-column prop='category'值一致
                                getValue(row) { //该列用于比较的值的获取方法
                                    return row.category;
                                },
                            },
                            {
                                name: 'order', 
                                getValue(row) {
                                    return row.evaluCategory.name;//行序号跟随此列
                                },
                            },
                            {
                                name: 'evalu',
                                getValue(row) {
                                    return row.evaluCategory.name;
                                },
                            }
                        ];//参与合并的字段，在这里增加即可
                        var loca = []; //合并坐标与数量
                        for (var i in cols) {
                            loca.push({
                                rowSpan: 1,
                                colSpan: 1,
                                rowIndex: null,
                                colProperty: cols[i].name,
                                order: 0,//行序号
                                value: null,
                                getValue: cols[i].getValue,
                                getOrder() {
                                    return this.colProperty == 'evalu' ? this.order : null;
                                }
                            });
                        }

                        for (var i = 0; i < pdata.rows.length; i++) {
                            pdata.rows[i].category = '管理过程';
                            pdata.rows[i].flag = 'p';
                            pdata.rows[i].cellSpans = [];
                            for (var _w in loca) {
                                var w = loca[_w];
                                if (i == 0 || w.value != w.getValue(pdata.rows[i])) {//边界指针，1.第一条硬性第一个边界 2.与上一单元格值不同的属于边界
                                    w.rowIndex = i;//行索引，若下一单元格值相同则以此索引叠加rowSpan值
                                    w.rowSpan = 1;//rowSpan默认1
                                    w.value = w.getValue(pdata.rows[i]);//单元格值
                                    w.order += 1;//行号+1
                                } else {
                                    //若本单元格值==上一单元格值则合并列，rowSpan+=1
                                    for (var p in pdata.rows[w.rowIndex].cellSpans) {
                                        var n = pdata.rows[w.rowIndex].cellSpans[p];
                                        if (n.colProperty == w.colProperty) {
                                            n.rowSpan += 1;
                                        }
                                    }
                                }
                            }
                            //设置行号
                            for (var q in loca) {
                                var o = loca[q].getOrder();
                                if (o) {
                                    pdata.rows[i].order = o;
                                    break;
                                }
                            }

                            pdata.rows[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度复制，否则总是指向最后一条数据
                        }

二、合并方法

        spanMethod({ row, column, rowIndex, columnIndex }) {
            //遍历本行合并表
            for (var i in row.cellSpans) {
                var _r = row.cellSpans[i];
                //列属性匹配
                if (_r.colProperty == column.property) {
                    //若合并表指向本单元格则构建合并参数并返回
                    if (_r.rowIndex == rowIndex) {
                        return {
                            rowspan: _r.rowSpan,
                            colspan: _r.colSpan
                        }
                    } else {//否则隐藏该单元格。这里必须有，否则单元格会被右移一列
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            }
        },

毛坯图：

• 填坑心得

水平太臭调试调了1天多。由于数据抽象，期间序列化输出各种对象，看见了数据思路明晰多了！后来被

pdata.rows[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度复制，否则总是指向最后一条数据

这个赋值搞坑到，无论如何赋值都指向最后一条，Object.assign用上也不行，只能用这句来替代了。

感谢p墩大力帮助！欢迎加群 C#开发.NET后花园 137205402 一起学习！