一招教你自定义elementui中表格斑马线

element作为一款基于vue.js的组件库，组件可谓丰富切强大，在vue项目中展示多条数据时，经常会用到el-table组件，为了使页面更加的美观，ui设计时往往会在页面上给table加上斑马线，当然这都不是问题，毕竟el-table有stripe属性。江stripe属性设置为true，就能给表格加上斑马线。
这个时候产品说话了，你这个斑马线太丑了，换一个颜色，我。。。。。。。没办法只能再想办法呗，查看官方文档你会发现我们可以自定义表格行的class名称，在Table Attributes里可以找到row-class-name，通过这个属性我们就可以实现自定义表格斑马线。
1.首先我们在el-table中添加属性,为表格行添加className

:row-class-name="tableRowClassName"

2.js中加入

tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    }

此部分为表格的单双行设置不同的className。
3.css中为warning-row与success-row设置不同的背景颜色，当然了 你也可以不只设置背景颜色，

.warning-row {
      background: #142e51;
    }
    .success-row {
      background: #011e47;
    }

这样el-table自定义表格斑马线就完成了，注意这里的css不要写在带scoped的style里，scoped限制style里的样式只在当前组件生效，el-table是我们在当前组件引入element的组件，所以样式并不会生效。解决办法。另写一个style里去写上面代码，或者在elementui全局样式里去自定义整个项目的表格斑马线