关于javascript:elementui中table合并单元格后隔行变色

客户想要这种合并单元格后的变色成果

如果不解决的话，进去的是这种每一行都变色的成果，页面显得不参差并且目迷五色的

代码如下：

js局部

export default {
    data() {
        return {
            tableData: [
                {
                    "indexName": "总货值",
                    "num": "1.00",
                    "indexType": "货值指标",
                    "unit": "万元",
                    "panoramicMeeting": "202930",
                    "lastMonthDynamic": "52695",
                    "thisMonthDynamic": "23125",
                    "difference": "25362",
                    "differenceRate": "-88.6"
                },
                {
                    "indexName": "我的项目开发成本投入",
                    "num": "2.00",
                    "indexType": "老本指标",
                    "unit": "万元",
                    "panoramicMeeting": "202960",
                    "lastMonthDynamic": "51569",
                    "thisMonthDynamic": "23569",
                    "difference": "222",
                    "differenceRate": "-88.4"
                },
                {
                    "indexName": "我的项目总成本双方",
                    "num": "3.00",
                    "indexType": "老本指标",
                    "unit": "万元",
                    "panoramicMeeting": "3500",
                    "lastMonthDynamic": "632",
                    "thisMonthDynamic": "6326",
                    "difference": "3333",
                    "differenceRate": "80.7"
                },
                {
                    "indexName": "我的项目建安老本双方",
                    "num": "4.00",
                    "indexType": "老本指标",
                    "unit": "万元",
                    "panoramicMeeting": "3000",
                    "lastMonthDynamic": "326",
                    "thisMonthDynamic": "3526",
                    "difference": "4444",
                    "differenceRate": "17.5"
                },
                {
                    "indexName": "三费投入",
                    "num": "5.00",
                    "indexType": "老本指标",
                    "unit": "万元",
                    "panoramicMeeting": "4000",
                    "lastMonthDynamic": "256326",
                    "thisMonthDynamic": "23569",
                    "difference": "12366",
                    "differenceRate": "489.2"
                },
                {
                    "indexName": "销售物业毛利额",
                    "num": "7.00",
                    "indexType": "我的项目利润指标",
                    "unit": "万元",
                    "panoramicMeeting": "202930",
                    "lastMonthDynamic": "256326",
                    "thisMonthDynamic": "23569",
                    "difference": "12366",
                    "differenceRate": "-88.4"
                },
                {
                    "indexName": "销售物业毛利率",
                    "num": "8.00",
                    "indexType": "我的项目利润指标",
                    "unit": "%",
                    "panoramicMeeting": "256544",
                    "lastMonthDynamic": "256326",
                    "thisMonthDynamic": "23569",
                    "difference": "12366",
                    "differenceRate": "-90.8"
                },
                {
                    "indexName": "我的项目利润率",
                    "num": "15.00",
                    "indexType": "我的项目利润指标",
                    "unit": "%",
                    "panoramicMeeting": "0",
                    "lastMonthDynamic": "0",
                    "thisMonthDynamic": "0",
                    "difference": "12366",
                    "differenceRate": "-15.0"
                },
                {
                    "indexName": "我的项目净利率",
                    "num": "16.00",
                    "indexType": "我的项目利润指标",
                    "unit": "%",
                    "panoramicMeeting": "0",
                    "lastMonthDynamic": "0",
                    "thisMonthDynamic": "0",
                    "difference": "12366",
                    "differenceRate": "2.7"
                },
                {
                    "indexName": "股东净利润",
                    "num": "17.00",
                    "indexType": "我的项目利润指标",
                    "unit": "万元",
                    "panoramicMeeting": "0",
                    "lastMonthDynamic": "0",
                    "thisMonthDynamic": "0",
                    "difference": "12366",
                    "differenceRate": "12.1"
                },
                {
                    "indexName": "股东净利率",
                    "num": "18.00",
                    "indexType": "我的项目利润指标",
                    "unit": "%",
                    "panoramicMeeting": "0",
                    "lastMonthDynamic": "0",
                    "thisMonthDynamic": "0",
                    "difference": "12366",
                    "differenceRate": "4.8"
                },
                {
                    "indexName": "我的项目IRR",
                    "num": "19.00",
                    "indexType": "现金流指标",
                    "unit": "",
                    "panoramicMeeting": "0",
                    "lastMonthDynamic": "0",
                    "thisMonthDynamic": "0",
                    "difference": "256326",
                    "differenceRate": "193.7"
                },
                {
                    "indexName": "经营性现金流首次回正工夫",
                    "num": "20.00",
                    "indexType": "现金流指标",
                    "unit": "月",
                    "panoramicMeeting": "20210112",
                    "lastMonthDynamic": "20200302",
                    "thisMonthDynamic": "20200402",
                    "difference": "20200504",
                    "differenceRate": "0.0"
                },
                {
                    "indexName": "经营性现金流首次回正周期",
                    "num": "21.00",
                    "indexType": "现金流指标",
                    "unit": "月",
                    "panoramicMeeting": "20220102",
                    "lastMonthDynamic": "20220102",
                    "thisMonthDynamic": "20210104",
                    "difference": "20200102",
                    "differenceRate": "0.0"
                }
            ],
            spanMethodOption: {}
        }
    },
    methods: {
        rowClass({row, rowIndex}) {
            var arr = []
            Object.keys(this.spanMethodOption).forEach((item, index)=>{
                if(row.indexType == item) {
                    if(index %2 === 0) {
                        arr.push('even-row')
                        //return 'even-row'//留神：这里return不回起到成果
                    }else{
                        arr.push('odd-row')
                        //return 'odd-row' //留神：这里return不回起到成果
                    }
                }
            })
            return arr
        },
        spanMethod ({ row, column, rowIndex, columnIndex }) {
            if(columnIndex === 1) {
                if (row.isShow) {
                    return [this.spanMethodOption[this.tableData[rowIndex].indexType], 1]
                }else{
                    return [0, 0]
                }
            }
        },
    },
    created() {
        this.tableData = this.tableData.map(item => {
            if (this.spanMethodOption[item.indexType]) {
                this.spanMethodOption[item.indexType] += 1
                item.isShow = false;
            } else {
                this.spanMethodOption[item.indexType] = 1
                item.isShow = true;
            }
            return item;
        })
    }
}

/deep/ .el-table {
    .version-table th {
        background-color:#797979;
        .cell {
            color:#fff;
        }
    }
    .even-row {
        background-color: #fff;
    }
    .odd-row {
        background-color: rgba(76, 75, 75, 0.04);
    }
    .red {
        color:#ed5327;
    }
}

留神：
1、stripe要为false，不然会有抵触；