美文网首页
修改斑马纹,奇偶行换颜色

修改斑马纹,奇偶行换颜色

作者: 小白的踩坑日常 | 来源:发表于2020-07-20 14:40 被阅读0次

    遇见如题的需求
    1、有答案如下:
    https://blog.csdn.net/wk15038187622/article/details/90511358

    2、但也可直接去修改全局样式:

    .el-table__row {
      background-color: #fafafa !important;
    }
    .el-table__row--striped td {
      background-color: #fff !important;
    }
    

    以上斑马纹样式记得后面加td否则不生效,别问我为啥我不知道

    3、曾想过修改源码,但是比较麻烦:
    呐,把原来的1换成0就行


    image.png

    dan'sh
    但是改源码部署麻烦就没试

    更新:
    修改全局样式那个,那样修改的话,hover时,有斑马纹的行没有显示hover样式。
    修改如下:

    
    /* 斑马纹 */
    /* hover */
    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #eff5fd !important;
    }
    /* 奇数行 */
    .el-table__row:nth-of-type(odd) > td {
      background-color: #fafafa;
    }
    /* 偶数行 */
    .el-table__row:nth-of-type(even) > td {
      background-color: #fff !important;
    }
    

    我知道了,之前加td是因为不小心在table上加了stripe属性,所以必须加td覆盖原有样式,现在把stripe去掉,直接修改样式就行。

    /* 斑马纹 */
    /* hover */
    .el-table--enable-row-hover .el-table__body tr:hover {
      background-color: #eff5fd !important;
    }
    /* .el-table th {
      background-color: #d5d5d5;
    } */
    /* 奇数行 */
    .el-table__row:nth-of-type(odd) {
      background-color: #fafafa;
    }
    /* 偶数行 */
    .el-table__row:nth-of-type(even) {
      background-color: #fff;
    }
    

    相关文章

      网友评论

          本文标题:修改斑马纹,奇偶行换颜色

          本文链接:https://www.haomeiwen.com/subject/hbtykktx.html