浪费了很多时间,看了各种文章写的cell-class-name=“计算出奇数偶数行返回不同样式”
实现效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/3c1cc244fc2b0c1272a06f0a61739067.png)
奇数行仍然为原先表格白色背景,f12查看表格奇数行单元格样式发现:
![](https://i-blog.csdnimg.cn/blog_migrate/687ea4b1e589f420ccfde78f7059cd5c.png)
也就是每个单元格有默认背景色,导致颜色修改不成功(即使!important也无法实现)
所以修改样式为:
//斑马线效果
.el-table--striped .el-table__body tr.el-table__row--striped td{
background: #1e2c35; //此处修改奇数行表格颜色
}
小结:(1)el-table中开启stripe属性
![](https://i-blog.csdnimg.cn/blog_migrate/394d8a673141c4eca58ffbac4358ccee.png)
(2)修改奇数行斑马线效果样式
(3)使用cell-class-name=“计算出奇数偶数行返回不同样式”等类似方式
或 直接使用css伪类选择器:
//修改表格的斑马线
.el-table tr:nth-child(even) {
background: #1f40a3 !important;
}
.el-table tr:nth-child(odd) {
background: transparent;
}
ps:表格hover颜色效果样式修改:
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #212e3e !important;
}
最终效果,表格实现不同行之间颜色交错效果。
![](https://i-blog.csdnimg.cn/blog_migrate/6d3b32351da0e69b5d88760b4864a9e6.png)