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

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;
}

如果要全局滚动条都是苹果的的, 在你全局样式里把goodsNameDiv改成*号就好了, 或者直接复制下列代码

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

还有别的样式, 直接复制到公共css文件

body::-webkit-scrollbar {
    width:10px
}
body::-webkit-scrollbar-track {
    box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
    border-radius:10px
}
body::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:#2d66a5;
    box-shadow:inset 0 0 6px rgba(0,0,0,0.15)
}

有帮助的话记得点个赞哦