美文网首页
element 表格修改

element 表格修改

作者: 青辰m | 来源:发表于2020-09-27 16:55 被阅读0次

    表头样式

    th{
        background: #04020d !important;
        color: rgba(202,207,239,0.80);
        line-height: 17px;
      }
    

    表格为空的时的样式

    .el-table__empty-block{
        color: #CACFEF !important;
        background: #261A55 !important;
      }
    

    表格斑马线样式

    .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: #04020d !important;
    }
    

    鼠标悬浮样式

    &--enable-row-hover &__body tr:hover>td {
        background-color: transparent !important;
      }
    

    表格列样式

    tr{
        color: #CACFEF !important;
        background: #261A55 !important;
      }
     td, th.is-leaf {
        border-bottom: transparent !important;
      }
    &::before{
        border-bottom: transparent !important;
        background: transparent !important;
      }
    

    其他

      tr, td, th{
        padding: 0 !important;
        height: 44px !important;
      }
      .cell , th>.cell{
        padding-left: 18px !important;
      }
    }
    

    滚动条修改

    .el-table{
    &__body-wrapper{
        &::-webkit-scrollbar {
          width: 8px; // 横向滚动条
          height: 8px; //纵向滚动条
        }
        // 滚动条的滑块
        &::-webkit-scrollbar-thumb {
          background-color: #4F2BDB;
          border-radius: 4px;
        }
        &::-webkit-scrollbar-track{/*滚动条里面轨道*/
          border-radius: 4px;
          background-color: transparent;
        }
      } 
    }
    

    相关文章

      网友评论

          本文标题:element 表格修改

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