目录

前言

思路

步骤1

1.构造数据

1.1 数据平铺

1.2.塞入行重排的判断标识（判断属性）（开始进行行列合并的行数据塞入重排判断标识）

步骤2

2.1 span-method方法定义

总结

---

前言

简单总结以下我司对于这部分的业务需求:

有多个项目名称，现在合并多个项目名称并重新命名这个组合，并且在列表中显示分组后的结果。

思路

先模仿饿了么给的简单示例，打印出对应参数进行分析

/* template部分 */
<el-table :data="dataList1"  :span-method="objectSpanMethod"   border>
                        <el-table-column align="center" label="合并项目名称" width="250" fixed prop="merge_name">
                            <template slot-scope="scope">
                                <div @click="mergeFn(scope.row)" style="cursor: pointer;">{{ scope.row.merge_name }} <i
                                        class="el-icon-circle-plus-outline"></i></div>
                            </template>
                        </el-table-column>
/*  ....*/
 </el-table>

/* script部分 */
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            console.log(row, column, rowIndex, columnIndex);
            
},

打印出了每条数据的行列信息以及行列的索引

这个span-method方法里可以自定义返回对应需要合并的行数与列数：

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            console.log(row);
            if (columnIndex === 0) {
                //条件判断，在列数为1的
                if (row.rowspan >= 1) {
                    //通过行属性rowspan判断
                    return {
                        //自定义行列排列 （意在第一列、行中属性rowspan>=1的行往下合并一行一列）
                        rowspan: row.rowspan, //自定义行数，
                        colspan: 1            //自定义列数
                    };
                } else {
                    //没有满足条件的判断
                    return {
                    //不做操作
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },

后台返回数据格式如下

其中的每条数据的projectList 就是合并后项目集合，所以可以通过这个集合长度来判断指定行的合并

步骤1

1.构造数据

因为实际返回的数据列表中很多需要显示字段都存在每条数据projectList子集内，所以我们得平铺子数据中的各个属性，从第二层平铺来到第一层，用于列表展示，所以在调用接口拿到数据的时候需要进行数据重构

数据重构的两点：

1.1 数据平铺

1.2.塞入行重排的判断标识（判断属性）（开始进行行列合并的行数据塞入重排判断标识）

getList() {
            //接口调用    
            mergeList(this.tblQueryCond).then(res => {
                const data = res.rows;
                var List = []
                data.forEach(item => {
                    item.projectList.forEach((obj, index) => {
                            //存在子集的行，开始平铺数据和塞入合并标识
                        if (index == 0) {
                            //子集平铺，第一条就是开始行列合并的行
                            List.push({
                                id: item.id,
                                merge_name: item.merge_name,
                                rowspan: item.projectList.length, //关键，塞入合并标识和合并的行数
                                check: obj.check,
                                completion: obj.completion,
                                construction_license_no: obj.construction_license_no,
                                fire_status: obj.fire_status,
                                is_shutdown: obj.is_shutdown,
                                jl_company_name: obj.jl_company_name,
                                js_company_name: obj.js_company_name,
                                project_id: obj.project_id,
                                project_name: obj.project_name,
                                sg_company_name: obj.sg_company_name,
                                supervise_user_name: obj.supervise_user_name,
                                supervisor: obj.supervisor
                            })
                        } else {
                            //子集的其他行，同样平铺数据
                            List.push({
                                id: item.id,
                                merge_name: item.merge_name,
                                check: obj.check,
                                completion: obj.completion,
                                construction_license_no: obj.construction_license_no,
                                fire_status: obj.fire_status,
                                is_shutdown: obj.is_shutdown,
                                jl_company_name: obj.jl_company_name,
                                js_company_name: obj.js_company_name,
                                project_id: obj.project_id,
                                project_name: obj.project_name,
                                sg_company_name: obj.sg_company_name,
                                supervise_user_name: obj.supervise_user_name,
                                supervisor: obj.supervisor
                            })
                        }
                    })
                })
                this.dataList = List
                this.total = res.total
            })

        },

步骤2

2.1 span-method方法定义

根据判断来写

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                //第一列
                if (row.rowspan&&row.rowspan >= 1) {
                    //行属性中rowspan存在，并且大于等于1的，开始合并
                    return {
                        rowspan: row.rowspan, //合并的行数
                        colspan: 1 //合并的列数
                    };
                } else {
                    //不合并，以下写法等于不操作任何
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },

总结

以上就是我工作遇到合并行的实例，和我的解决办法

此外span-method方法中合并的行列可以写成return[row.rowspan,1]、return[0,0]。