客户想要这种合并单元格后的变色成果
如果不解决的话，进去的是这种每一行都变色的成果，页面显得不参差并且目迷五色的
代码如下：
<template> <div class="version-contrast__content"> <el-table :data="tableData" :stripe="false" :span-method="spanMethod" :row-class-name="rowClass"> <el-table-column prop="num" width="60" label="序号"></el-table-column> <el-table-column prop="indexType" label="指标类别"></el-table-column> <el-table-column prop="indexName" label="指标名称"></el-table-column> <el-table-column prop="unit" label="单位"></el-table-column> <el-table-column prop="panoramicMeeting" label="全景会"></el-table-column> <el-table-column prop="lastMonthDynamic" label="上月动静"></el-table-column> <el-table-column prop="thisMonthDynamic" label="本月动静"></el-table-column> <el-table-column width="170" prop="difference" label="差别(本月动静版-全景会)"></el-table-column> <el-table-column prop="differenceRate" label="差别率"> <template slot-scope="scope"> <span>{{scope.row.differenceRate}}%</span> </template> </el-table-column> </el-table> </div></template>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，不然会有抵触；