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.