elementui更改el-table表头背景颜色和字体颜色

前提:elementui更改el-table表头背景颜色和字体颜色在项目中使用elementui中的el-table时领导觉得这个样式不合适想修改一下,尤其表头与表格内容之间色差,字形,字号等等区别较小不易辨认,降低了用户体验。所以想尝试更改一下表头的背景颜色和字体颜色,具体方法:根据elementui官网的提示,header-cell-style是表头单元格的style的回调方法,也可以使用一个固定的Object(对象)为所有表头单元格设置一样的Style,不会影响生成标准化的代码。

一、根据elementui官网的说法,header-cell-style是表头单元格的 style 的回调方法!!!

 最初的样子:elementui更改el-table表头背景颜色和字体颜色_第1张图片

写下一下代码: 

实现的结果:

elementui更改el-table表头背景颜色和字体颜色_第2张图片

二、 用/deep/深度监听来改变头部样式!!!

最初的样子:elementui更改el-table表头背景颜色和字体颜色_第3张图片

写下一下代码: 




 实现的结果: elementui更改el-table表头背景颜色和字体颜色_第4张图片

 三、用新样式覆盖覆盖旧样式实现想要的结果!!!

优点:

1.可以更改字体的大小,字体样式;

2.可以设置文字居中;

3.可以user-select这样类型的属性:xxx-xxx:none;

最初的样子:

elementui更改el-table表头背景颜色和字体颜色_第5张图片

 写下一下代码:


 实现的结果:

elementui更改el-table表头背景颜色和字体颜色_第6张图片

 

你可能感兴趣的:(elementui,vue.js,javascript)