合并单元格后element-ui中的表格变色
如果客户想要合并单元格后的变色效果,你不处理,每一行的变色效果就出来了,页面会显得参差不齐,很刺眼。代码如下:"rowClass">{{scope.row.differenceRate}}%
js部分exportdefault{data(){return{tableData:[{"indexName":"总价值","num":"1.00","indexType":"价值指数","unit":"10,000","panoramicMeeting":"202930","lastMonthDynamic":"52695","thisMonthDynamic":"23125","difference":"25362","differenceRate":"-88.6"},{"indexName":"项目开发成本投入","num":"2.00","indexType":"成本指数","单位":"万元","全景会议":"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":"10,000","panoramicMeeting":"3000","lastMonthDynamic":"326","thisMonthDynamic":"3526","difference":"4444","differenceRate":"17.5"},{"indexName":"三费输入","num":"5.00","indexType":"CostIndicator","unit":"10,000","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","iindexType":"利润指数","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":"ProjectIRR","num":"19.00","indexType":"CashFlowMetric","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”,“差异”:“20200102”,“differenceRate”:“0.0”}],spanMethodOption:{}}},方法:{rowClass({row,rowIndex}){vararr=[]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'//注意:返回这里n不返回到效果}}})returnarr},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]+=1item.isShow=false;}else{this.spanMethodOption[item.indexType]=1item.isShow=true;}returnitem;})}}/deep/.el-table{.version-tableth{背景色:#797979;.cell{颜色:#fff;}}.even-row{背景颜色r:#fff;}.odd-row{背景色:rgba(76,75,75,0.04);}.red{颜色:#ed5327;}}注意:1.stripe必须为false,否则会冲突;