看啥推荐读物
专栏名称: 执笔于情
每天进步一点点
目录
相关文章推荐
今天看啥  ›  专栏  ›  执笔于情

element-table的tr的hover事件及苹果滚动条

执笔于情  · 简书  ·  · 2021-04-25 23:53

element-table的tr,hover事件,scss或者less中使用::v-deep

::v-deep {
        .el-table {
    user-select: none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    .el-table__header-wrapper {
        border-radius: 12px;
        margin-bottom: 10px;
        .el-table__header {
            thead {
              background: #F3F6F9;
            }
            thead>tr {
              background: #F3F6F9;
            }
            thead>tr>th{
                border-bottom: none;
                background: #F3F6F9;
            }
            thead>tr>th>div {
              color:#00192F;
              font-family: 'PingFang-SC-Bold';
            }
            // thead>tr>th:nth-child(1) {
            //     border-radius: 12px 0 0 12px;
            // }
            // thead>tr>th:nth-last-of-type(1) {
            //     border-radius: 0 12px 12px 0;
            // }
        }
    }
    tbody {
      .el-table__row {
        background: #fff;
        overflow: hidden;
        .el-table-column--selection .cell {
          padding-left: 10px;
        }
      }
      tr {
        .el-table-column--selection .cell {
          padding-left: 10px;
        }
          td {
              border-bottom: none;
          }
          td>div {
            color: #00192F;
            font-family: 'PingFang-SC-Medium';
          }
          td:nth-child(1) {
              border-radius: 12px 0 0 12px;
          }
          td:last-child {
              border-radius: 0 12px 12px 0;
          }
          &:hover {
              td{
                background-color: #F3F6F9;
                border-bottom: none; 
              }
              td:nth-child(1) {
                  border-radius: 12px 0 0 12px;
              }
              td:last-child {
                  border-radius: 0 12px 12px 0;
              }
          }
      }
      &:hover {
        background-color: #F3F6F9;
      }
    }
  }

苹果滚动条

.goodsNameDiv::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }
    .goodsNameDiv::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #666;
    }
    .goodsNameDiv::-webkit-scrollbar-track {
        background-color: #eee;
    }



原文地址:访问原文地址
快照地址: 访问文章快照