el-table修改指定列字体颜色 ,覆盖划过行的高亮显示文字颜色

修改指定列字体颜色 ,覆盖划过行的高亮显示文字颜色

代码如下：

<div class="c1"><el-table:data="tableData"striperow-class-name="custom-table-row"style="width:100%"@cell-mouse-enter="lightFn"@cell-mouse-leave="(checkName = ''), setAllChart()"><!-- // nowInfoNum 舆情事件量 eventSum 舆情传播量spreadSum 舆情办结率 转办时效 --><el-table-column type="index" label="排序" align="center"></el-table-column><el-table-columnprop="addressName"label="所属地域"width="80"align="center"></el-table-column><!-- el-table_1_column_3 is-center  el-table__cell --><!-- el-table_1_column_3 is-center  el-table__cell --><el-table-columnprop="nowInfoNum":label="this.typeName == '转办时效'? '转办时效(小时)': this.typeName.replace(new RegExp('舆情', 'g'), '')"align="center"></el-table-column><el-table-columnv-if="this.typeName != '舆情事件量'"prop="eventSum"label="事件量"align="center"></el-table-column><el-table-columnv-if="this.typeName != '舆情传播量'"prop="spreadSum"label="传播量"align="center"></el-table-column><el-table-column prop="waitSum" label="待激活" align="center"></el-table-column><el-table-column prop="waitFillSum" label="待核实" align="center"></el-table-column><el-table-column prop="doFillSum" label="已核实" align="center"></el-table-column><el-table-columnprop="applySum"label="办结申请"width="80"align="center"></el-table-column><el-table-column prop="finishSum" label="已办结" align="center"></el-table-column><el-table-columnprop="finishRate"label="办结率"v-if="this.typeName != '舆情办结率'"align="center"></el-table-column><el-table-columnv-if="this.typeName != '转办时效'"prop="transferHour"label="转办时效(小时)"width="80"align="center"></el-table-column></el-table></div>

 el-table设置属性自定义名字 row-class-name="custom-table-row"或直接浏览器属性审查拿到原始名

           

<style scoped>
//修改指定列字体颜色
.c1 >>> .el-table_1_column_3 {color: #fd5702;
}
//覆盖划过行的高亮显示
.c1 >>> .custom-table-row:hover .cell{color: var(--border) !important ;}
</style>

后续跟进

我碰到了表格里的类名一直不停变的情况

修改为下方这种稳定写法

      this.$nextTick(function(){
const elPart=document.querySelectorAll('tr');
elPart.forEach(a=>{a.children[2].style.color='#fd5702';
})})

本次开发中遇到的有意思的文章

1.

2.

3.