element中el-table表头通过header-row-style设置样式

文章目录

一、知识点

有些时候需要给element-ui表头设置不同样式,比如居中、背景色、字体大小等等,这时就可以用到本文要说的属性header-row-style。官网说明如下所示:

二、设置全部表头

2.1、方式一

html 复制代码
<el-table :header-cell-style="{'text-align': 'center'}" />

2.2、方式二

vue 复制代码
<template>
	<el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {
	methods: {
		tableHeaderColor ({row, column, rowIndex, columnIndex}) {
			return 'text-align: center;'
		}
	}
}
</script>

三、设置某个表头

vue 复制代码
<template>
	<el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {
	methods: {
		// 设置表头的颜色
		tableHeaderColor({ row, column, rowIndex, columnIndex }) {
			console.log(row, column, rowIndex, columnIndex);
			if (rowIndex === 0 && columnIndex === 1) {
				return 'background-color: #afccfd; color:#000000;'; //蓝色
			} else if (rowIndex === 0 && columnIndex === 2) {
				return 'background-color: #c0e33c; color:#000000;';//绿色
			} else if (rowIndex === 0 && columnIndex === 3) {
				return 'background-color: #fbc57b; color:#000000;';//橙色
			} else {
				return 'color:#000000; background: #ffffff;';
			}
		}
	}
}
</script>

效果如下所示:

四、最后

本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕

相关推荐
Devil枫24 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css