element表格修改每个表头不同颜色

最新推荐文章于 2025-06-11 15:17:08 发布

原创最新推荐文章于 2025-06-11 15:17:08 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

样式专栏收录该内容

1 篇文章

订阅专栏

这篇文章介绍了如何在Vue中使用Element UI实现表格头单元格的背景颜色根据列索引不同设置为不同的颜色。通过`header-cell-style`属性和自定义方法，展示了如何根据columnIndex动态应用CSS背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：
在这里插入图片描述
在贴代码：

<el-table
    :data="tableData"
    border
    
    //核心代码就是这一行
	:header-cell-style="tableRowClassName"
	
	//如果还有其他样式可以用个属性，函数返回的事class类名
	//:header-cell-class-name="tableRowClassName"
	
    style="width: 100%">
	<!-- :header-cell-class-name="tableRowClassName" -->
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="位置" width="180"></el-table-column>
  </el-table>

methods: {
	tableRowClassName({row,column,rowIndex, columnIndex}) {
		 console.log(columnIndex)
	     if(columnIndex == 0){
			return "background:#ccc;"
		 }else if(columnIndex == 1){
			return "background:#19e9ec;"
		 }else if(columnIndex == 2){
			return "background:#438eea;"
		 }
		},
    }

over！！！