美文网首页
自定义el-table斑马线

自定义el-table斑马线

作者: 秀萝卜 | 来源:发表于2020-07-14 15:49 被阅读0次

    https://blog.csdn.net/wk15038187622/article/details/90511358

    Element 斑马线是 stripe 属性,自定义斑马线是 row-class-name,通过自定义属性实现个性斑马线如下

    //CSS 样式添加
     
    .el-table .warning-row{
          background:#F3F9FF
    }
     
    //HTML table标签添加属性
    <el-table :data="tableData"  :row-class-name="tabRowClassName">
    </el-table>
     
    //在methods总通过方法计算返回对应class样式
     
    tabRowClassName({row,rowIndex}){
        let index = rowIndex + 1;
        if(index %2 == 0){
            return 'warning-row'
        }
    }
    
    

    相关文章

      网友评论

          本文标题:自定义el-table斑马线

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