福州网站建设服务商北京优化靠谱的公司

el-table 中有现成的隔行换色功能，只要增加 stripe 属性即可。但是如果有单元格合并的话，这个属性就不可用了。这时候我们就需要动点小心思了。

基于相同字段进行合并
单元格合并：基于表头中的某一列，具有相同值的个数相加进行合并

隔行换色：基于表头中的某一列 ，放到一个集合里，根据下标 判断奇偶行

实现效果如图：

代码实现：

<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><script>
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"}],spanMethodOption: {}}},methods: {rowClass({row, rowIndex}) {var arr = []Object.keys(this.spanMethodOption).forEach((item, index)=>{// console.log('itemtt', item, index)if(row.indexType == item) {if(index %2 === 0) {arr.push('even-rows')//return 'even-rows'//注意：这里return不回起到效果}else{arr.push('odd-rows')//return 'odd-rows' //注意：这里return不回起到效果}}})return arr},spanMethod ({ row, column, rowIndex, columnIndex }) {if(columnIndex === 1) {if (row.isShow) {return [this.spanMethodOption[row.indexType], 1]}else{return [0, 0]}}// console.log('this.spanMethodOption', this.spanMethodOption)},},created() {this.tableData = this.tableData.map(item => {if (this.spanMethodOption[item.indexType]) {this.spanMethodOption[item.indexType] += 1item.isShow = false;} else {this.spanMethodOption[item.indexType] = 1item.isShow = true;}return item;})}
}
</script><style lang="scss">
::v-deep .el-table {.version-table th {background-color:#797979;.cell {color:#fff;}}.even-rows {background-color: #fff;}.odd-rows {background-color: #F7F8FA;}.red {color:#ed5327;}/* 覆盖表格行鼠标移入的背景色 */.el-table__body tr.hover-row>td.el-table__cell{background-color: transparent !important;}
}
</style>