＜el-table＞根据后端返回数据决定合并单元格的数量（521特别版）

一、需求说明

💝仅合并第一列，其余为固定列

二、用到的方法

💌合并单元格可以采用三种方法

💕1. 手写表格

简单 但没有饿了么写好的固定列及滑动

💕2. 表格嵌套表格 再合并

一些复杂的表格结构可使用

💕3. 直接使用饿了么的组件 即本章内容

逻辑较简单的 合并

💌代码不难，以下是需要用到的小知识点，都很常用

💕1. reduce函数 详见 👉👉👉 第5点
💕2. 遍历对象

三、代码（只展示了本文章重点代码）

<el-table :data="deviceData" :span-method="spanMethod" class="device-table-wrap" height="100%">
    <el-table-column prop="itemCategory" label="项目类别" min-width="130" fixed="left">
        <template v-slot="{ row }">
            {{ row.itemCategoryStr }}
        </template>
    </el-table-column>
    <el-table-column prop="maintenanceContent" label="维保内容" min-width="130" fixed="left" show-overflow-tooltip>
        <template v-slot="{ row }">
            {{ row.maintenanceContentStr }}
        </template>
    </el-table-column>
    <el-table-column prop="manufacturers" label="制造厂家" width="160">
        <template v-slot="{ $index }">
            <el-input v-model="deviceData[$index].manufacturers" size="small" placeholder="请输入"></el-input>
        </template>
    </el-table-column>
</el-table>

methods: {
        spanMethod({ row, column }) {
            if (column.label === '项目类别' && row.colspan !== 1) {
            	// 合并不是 数量 1 的
                return [row.colspan, 1];
            } else if (column.label === '项目类别' && row.colspan === 1) {
            	//  数量 是 1 的直接隐藏掉
                return [0, 1];
            }
        },

        // 统计项目类别出现次数 用来获取合并列数
        statisticsFunction(arr) {
            return arr.reduce(function (pre, cur) {
                pre[cur] ? pre[cur]++ : (pre[cur] = 1);
                return pre;
            }, {});
        },

        deviceInfoList() {
            deviceInfoList(this.clientId)
                .then(res => {
                    // 首选 新增一个字段  用来存放要合并的列数
                    this.deviceData = res.map(item => {
                        this.$set(item, 'colspan', 1);
                        return item;
                    });
                    
                    // 遍历出 需要合并的列的所有字段
                    let categorys = this.deviceData.map(item => {
                        return item.itemCategoryStr;
                    });
                     
                    let colspanList = this.statisticsFunction(categorys);
					
					// 遍历对象 仅将找到的第一个字段的 colspan 设置为出现的次数 
					// 其余还是初始值 1
                    Object.keys(colspanList).forEach(key => {
                        this.deviceData.find(item => item.itemCategoryStr === key).colspan = colspanList[key];
                    })
                })
                .catch(() => {});
        }
  }