图文详解Element-UI中自定义修改el-table样式

目录

• 前言
• 1、修改th(头部)的background-color
• 2、修改表头字体颜色
• 3、修改tr(行)的background-color
• 4、修改tr(行内线)的background-color
• 5、修改斑马线的background-color(奇偶行背景)
• 6、修改表格最底部background-color和height
• 7、修改表格无数据background-color，字体颜色
• 8、修改鼠标选中行的background-color
• 9、修改行内文字居中（除表头）
• 10、修改除表头外的表格内容的背景色
• 11、修改行高
• 12、修改整个表格的水平和垂直滚动条
• 总结

前言

我们在使用element UI库的时候，确实给我们带来了许多便利，但是，往往组件库无法满足我们的业务需求，这时就需要我们在组件库的基础上修改样式。

今天一篇图解文章教大家如何在组件库的基础上去修改样式，今天我们以el-table 为例子。

el-table原代码:

1、修改th(头部)的background-color

2、修改表头字体颜色

3、修改tr(行)的background-color

4、修改tr(行内线)的background-color

5、修改斑马线的background-color(奇偶行背景)

6、修改表格最底部background-color和height

7、修改表格无数据background-color，字体颜色

8、修改鼠标选中行的background-color

以下效果 同上,就不附加效果图了,博友们可自行尝试 ‍

9、修改行内文字居中（除表头）

10、修改除表头外的表格内容的背景色

11、修改行高

12、修改整个表格的水平和垂直滚动条

总结

到此这篇关于Element-UI中自定义修改el-table样式的文章就介绍到这了,更多相关自定义修改el-table样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！