Elementui table合并表格（一）

<template>
     <div :key="menuKey">
                    <el-table
                            :data="tableData6"
                            style=" 100%"
                            border
                            :loading="loading"
                            :span-method="cellMerge"
                            :key="Math.random()"
                    >
                        <el-table-column label="所属单位"  prop="departmentName"  :key="Math.random()">
                        </el-table-column>
                        <el-table-column label="场所" prop="stationName" :key="Math.random()"></el-table-column>
                        <el-table-column label="区域类型" prop="categoryName" :key="Math.random()">
                        </el-table-column>
                        <el-table-column label="区域名称" prop="locationName" :key="Math.random()">
                        </el-table-column>
                        <el-table-column label="区域面积（㎡）" prop="dimension" :key="Math.random()">
                        </el-table-column>
                        <el-table-column label="器材类型"  prop="eqTypeName" :key="Math.random()">
                        </el-table-column>
                        <el-table-column label="规格名称" prop="eqSpecName" :key="Math.random()">
                        </el-table-column>
                        <el-table-column label="配置数量" prop="number" :key="Math.random()">
                        </el-table-column>
                        <el-table-column label="消防通道数量" prop="fireEscapeNum" :key="Math.random()"></el-table-column>
                        <el-table-column label="摄像头数量" prop="cameraNum" :key="Math.random()"></el-table-column>
                        <el-table-column label="保安数量" prop="securityGuardNum" :key="Math.random()"></el-table-column>
                    </el-table>
                </div>
      </template>

<script>
    export default {
       data () {
            return {
                tableData:[],
                spanOneArr:[],
                spanTwoArr:[],
                spanThreeArr:[],
                spanFourArr:[],
                spanFiveArr:[],
                spanSixArr:[],
            }
        }
//强制刷新table
  watch:{
            tableData6(){

                ++this.menuKey
                console.log(this.menuKey)
            }
        },
  methods: {
         getSpanArr(tableData) {
                let concatOne = 0,
                    concatTwo = 0,
                    concatThree = 0,
                    concatFour = 0,
                    concatFive = 0,
                    concatSix = 0;
                   this.spanOneArr = [],
                    this.spanTwoArr = [],
                    this.spanThreeArr=[],
                    this.spanFourArr=[],
                    this.spanFiveArr=[],
                    this.spanSixArr=[];
     
                tableData.forEach((item,index)=>{
                    if(index === 0){
                        this.spanOneArr.push(1);
                        this.spanTwoArr.push(1);
                        this.spanThreeArr.push(1);
                        this.spanFourArr.push(1);
                        this.spanFiveArr.push(1);
                        this.spanSixArr.push(1);
                    }else{
                        if(item.departmentName === tableData[index - 1].departmentName){ //第一列需合并相同内容的判断条件
                            this.spanOneArr[concatOne] += 1;
                            this.spanOneArr.push(0);
                        }else{
                            this.spanOneArr.push(1);
                            concatOne = index;
                        };
                        if(item.stationName === tableData[index - 1].stationName){//第二列合并相同内容
                            this.spanTwoArr[concatTwo] += 1;
                            this.spanTwoArr.push(0);
                        }else{
                            this.spanTwoArr.push(1);
                            concatTwo = index;
                        };
                        if(item.categoryName === tableData[index - 1].categoryName){//第三列合并相同内容
                            this.spanThreeArr[concatThree] += 1;
                            this.spanThreeArr.push(0);
                        }else{
                            this.spanThreeArr.push(1);
                            concatThree = index;
                        };
                        if(item.locationName === tableData[index - 1].locationName){
                            this.spanFourArr[concatFour] += 1;
                            this.spanFourArr.push(0);
                        }else{
                            this.spanFourArr.push(1);
                            concatFour = index;
                        };
                        if(item.dimension === tableData[index - 1].dimension){
                            this.spanFiveArr[concatFive] += 1;
                            this.spanFiveArr.push(0);
                        }else{
                            this.spanFiveArr.push(1);
                            concatFive = index;
                        };
                        if(item.eqTypeName === tableData[index - 1].eqTypeName){
                            this.spanSixArr[concatSix] += 1;
                            this.spanSixArr.push(0);
                        }else{
                            this.spanSixArr.push(1);
                            concatSix = index;
                        };
                    }
                });
            },

            cellMerge({ row, column, rowIndex, columnIndex }) {
                if(columnIndex === 0 ) {
                    const _row = this.spanOneArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                if(columnIndex === 1) {
                    const _row = this.spanTwoArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                if(columnIndex === 2) {
                    const _row = this.spanThreeArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                if(columnIndex === 3) {
                    const _row = this.spanFourArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                if(columnIndex === 4) {
                    const _row = this.spanFiveArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                 if(columnIndex === 5) {
                   const _row = this.spanSixArr[rowIndex];
                   const _col = _row > 0 ? 1 : 0;
                   return {
                       rowspan: _row,
                       colspan: _col
                   };
               }
            },
    }
}

数据结构
{"data":{"pageNum":1,"pageSize":10,"published":true,"records":[{"cameraNum":0,"categoryId":"c94576043751a0583591a40cfd3cef80","categoryName":"其他","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":75.0,"eqSpecName":"悬挂式干粉自动灭火器6KG","eqTypeName":"灭火器","fireEscapeNum":0,"locationId":"09c61e318e7a11e99d80fa163e66dc10","locationName":"办公区","number":1,"securityGuardNum":0,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":0,"categoryId":"c94576043751a0583591a40cfd3cef80","categoryName":"其他","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":75.0,"eqSpecName":"手提式干粉灭火器4KG","eqTypeName":"灭火器","fireEscapeNum":0,"locationId":"09c61e318e7a11e99d80fa163e66dc10","locationName":"办公区","number":2,"securityGuardNum":0,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":1,"categoryId":"18f2ac7cf3393cb68dc0323732ee6b2d","categoryName":"充电站","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":20.0,"eqSpecName":"消防栓（不带柜体）","eqTypeName":"消防栓","fireEscapeNum":1,"locationId":"0acb63ad00d44460b0a92e29ba0f0f88","locationName":"测试","number":200,"securityGuardNum":1,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":1,"categoryId":"18f2ac7cf3393cb68dc0323732ee6b2d","categoryName":"充电站","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":20.0,"eqSpecName":"消防栓（带柜体）","eqTypeName":"消防栓","fireEscapeNum":1,"locationId":"0acb63ad00d44460b0a92e29ba0f0f88","locationName":"测试","number":200,"securityGuardNum":1,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":1,"categoryId":"18f2ac7cf3393cb68dc0323732ee6b2d","categoryName":"充电站","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":20.0,"eqSpecName":"悬挂式干粉自动灭火器6KG","eqTypeName":"灭火器","fireEscapeNum":1,"locationId":"0acb63ad00d44460b0a92e29ba0f0f88","locationName":"测试","number":1,"securityGuardNum":1,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":1,"categoryId":"18f2ac7cf3393cb68dc0323732ee6b2d","categoryName":"充电站","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":20.0,"eqSpecName":"推车式干粉灭火器30KG","eqTypeName":"灭火器","fireEscapeNum":1,"locationId":"0acb63ad00d44460b0a92e29ba0f0f88","locationName":"测试","number":199,"securityGuardNum":1,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"}],"total":6,"totalPageNum":1},"msg":"ok","seq":"8068e87f16cd62c80c00000001007","status":200,"time":1566961336600}