element-ui中table合并单元格后隔行变色 element-ui中table合并单元格后隔

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

文章图片

如果不处理的话，出来的是这种每一行都变色的效果，页面显得不整齐并且眼花缭乱的
【element-ui中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 = https://www.it610.com/article/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，不然会有冲突；