ElementUI 树转表格-----跨行跨列（三）

<div id="app">
    <el-table :data="tableData" border size="mini" :span-method="tableSpanMethod">
        <el-table-column align="center" prop="category" label="行业类别"></el-table-column>
        <el-table-column align="center" prop="type" label="业务类型"></el-table-column>
        <el-table-column align="center" prop="field" label="产品领域"></el-table-column>
        <el-table-column align="center" prop="project" label="产品型项目"></el-table-column>
        <el-table-column align="center" prop="number" label="产品编号"></el-table-column>
        <el-table-column align="center" prop="name" label="产品名称" width="300">
            <template slot-scope="scope">
                <el-tooltip effect="dark" :content="scope.row.name" placement="top-start">
                    <a href="javascript:;" class="productName">
                        {{ scope.row.name }}
                    </a>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="manager" label="产品经理"></el-table-column>
        <el-table-column align="center" prop="grade" label="重要等级"></el-table-column>
        <el-table-column align="center" prop="isImportant" label="今年重点产品"></el-table-column>
        <el-table-column align="center" prop="isNew" label="今年新产品"></el-table-column>
    </el-table>
</div>
<script>
    export default {
        data(){
            return {
                tableData:[{
                    category:"不动产",
                    type:"一窗相关",
                    field:"软件开发",
                    project:"不动产一窗1",
                    number:"ABCDEFG",
                    name:"不动产在线登记服务平台【公众版】",
                    manager:"***",
                    grade:"高",
                    isImportant:"是",
                    isNew:"是"
                },{
                    category:"保险业",
                    type:"一窗相关",
                    field:"软件开发",
                    project:"不动产一窗2",
                    number:"HIGKLMN",
                    name:"中国人寿保险服务平台",
                    manager:"***",
                    grade:"高",
                    isImportant:"否",
                    isNew:"否"
                },{
                    category:"保险业",
                    type:"一窗相关",
                    field:"软件开发",
                    project:"不动产一窗2",
                    number:"OPQRST",
                    name:"中国平安保险服务平台",
                    manager:"***",
                    grade:"中",
                    isImportant:"否",
                    isNew:"是"
                },{
                    category:"采矿",
                    type:"一窗相关",
                    field:"软件开发",
                    project:"不动产一窗4",
                    number:"UVWSYZ",
                    name:"山西煤矿生产信息管理平台",
                    manager:"***",
                    grade:"低",
                    isImportant:"是",
                    isNew:"是"
                },{
                    category:"采矿",
                    type:"一窗相关1",
                    field:"软件开发",
                    project:"不动产一窗5",
                    number:"A1B2C3",
                    name:"黑龙江煤矿开采信息服务平台",
                    manager:"***",
                    grade:"低",
                    isImportant:"否",
                    isNew:"否"
                },{
                    category:"采矿",
                    type:"一窗相关1",
                    field:"软件开发",
                    project:"不动产一窗6",
                    number:"D4E5F6",
                    name:"大同矿业管理平台",
                    manager:"***",
                    grade:"中",
                    isImportant:"否",
                    isNew:"否"
                },{
                    category:"能源",
                    type:"一窗相关1",
                    field:"软件开发",
                    project:"不动产一窗7",
                    number:"H7I8G9",
                    name:"江苏华电能源信息服务管理平台",
                    manager:"***",
                    grade:"高",
                    isImportant:"是",
                    isNew:"是"
                }]
            }
        },
        mounted() {

        },
        created() {

        },
        methods:{
            /**
             * 合并行或列的计算方法
             */
            tableSpanMethod({row, column, rowIndex, columnIndex}){
                if(columnIndex == 0){
                    return {
                        rowspan: this.mergeRowsFirstColumn(row[column.property], this.productCatalogTableData, rowIndex, column.property),
                        colspan: 1
                    };
                }else if(columnIndex == 1){
                    return {
                        rowspan:this.mergeRowsSecondColumn(row[column.property], this.productCatalogTableData, rowIndex, column.property) ,
                        colspan: 1
                    };
                }else if(columnIndex == 2){
                    return {
                        rowspan:this.mergeRowsThirdColumn(row[column.property], this.productCatalogTableData, rowIndex, column.property) ,
                        colspan: 1
                    };
                }else if(columnIndex == 3){
                    return {
                        rowspan:this.mergeRowsFourthColumn(row[column.property], this.productCatalogTableData, rowIndex, column.property) ,
                        colspan: 1
                    };
                }
            },
            /**
             * 表格单元格合并-----行
             * @param {Object} value      当前单元格的值
             * @param {Object} data       当前表格所有数据
             * @param {Object} index      当前单元格的值所在 行 索引
             * @param {Object} property   当前列的property
             * @returns {number}          待合并单元格数量
             */
            mergeRows(value, data, index, property) {
                // 判断 当前行的该列数据 与 上一行的该列数据 是否相等
                if (index !== 0 && value === data[index - 1][property]) {
                    // 返回 0 使表格被跨 行 的那个单元格不会渲染
                    return 0;
                };

                // 判断 当前行的该列数据 与 下一行的该列数据 是否相等
                let rowSpan = 1;
                for (let i = index + 1; i < data.length; i++) {
                    if (value !== data[i][property]) {
                        break;
                    };
                    rowSpan++;
                };
                return rowSpan;
            },
            mergeRowsSecondColumn(value, data, index, property) {
                if (index !== 0 && value === data[index - 1][property] && data[index].category === data[index - 1].category) {
                    return 0;
                };

                let rowSpan = 1;
                for (let i = index + 1; i < data.length; i++) {
                    if(value == data[i][property] && data[i].category == data[i - 1].category){
                        rowSpan++;
                    }else{
                        break;
                    }
                };
                return rowSpan;
            },
            mergeRowsThirdColumn(value, data, index, property) {
                if (index !== 0 && value === data[index - 1][property] && data[index].type === data[index - 1].type && data[index].category === data[index - 1].category) {
                    return 0;
                };
                
                let rowSpan = 1;
                for (let i = index + 1; i < data.length; i++) {
                    if(value == data[i][property] && data[i].type == data[i - 1].type && data[i].category == data[i - 1].category){
                        rowSpan++;
                    }else{
                        break;
                    }
                };
                return rowSpan;
            },
            mergeRowsFourthColumn(value, data, index, property) {
                if (index !== 0 && value === data[index - 1][property] && data[index].name === data[index - 1].name) {
                        return 0;
                };
                
                let rowSpan = 1;
                for (let i = index + 1; i < data.length; i++) {
                    if(value == data[i][property] && data[i].name == data[i - 1].name){
                        rowSpan++;
                    }else{
                        break;
                    }
                };
                return rowSpan;
            }
        }
    }
</script>