【Vue】表格实现表头多彩
2026/7/13 16:42:56 网站建设 项目流程
最近在做统计的需求,一个台账有多个模块的数据,表头需要根据颜色区分
效果

上代码

表格添加 :header-cell-style

<el-table:header-cell-style="headerCellStyle">

编写实现 headerCellStyle

constDDEBF7=[这里是表头1的属性(prop对应字段) 比如 userName];constBDD7EE=[这里是表头2的属性(prop对应字段) 比如 userAge];....表头nconstheaderCellStyle=({row,column,rowIndex,columnIndex})=>{// 根据属性设置不同颜色if(DDEBF7.includes(column.property)){return{background:'#b8cce4 !important',color:'000000'};}elseif(BDD7EE.includes(column.property)){return{background:'#dce6f1 !important',color:'#000000'};}};

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询