共计 4572 个字符，预计需要花费 12 分钟才能阅读完成。
客户想要这种合并单元格后的变色成果
如果不解决的话，进去的是这种每一行都变色的成果，页面显得不参差并且目迷五色的
代码如下：
<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，不然会有抵触；
正文完
发表至： javascript
2022-01-21
