element table组件实现斑马线效果_el-table 斑马纹

浪费了很多时间，看了各种文章写的cell-class-name=“计算出奇数偶数行返回不同样式”

实现效果如下：

奇数行仍然为原先表格白色背景，f12查看表格奇数行单元格样式发现：

也就是每个单元格有默认背景色，导致颜色修改不成功（即使！important也无法实现）

所以修改样式为：

//斑马线效果
.el-table--striped .el-table__body tr.el-table__row--striped td{
  background: #1e2c35;     //此处修改奇数行表格颜色
}

小结：（1）el-table中开启stripe属性

（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;
  }

最终效果，表格实现不同行之间颜色交错效果。