el-table的一些样式总结

最新推荐文章于 2024-06-05 18:26:42 发布

极端~

最新推荐文章于 2024-06-05 18:26:42 发布

阅读量790

点赞数

分类专栏： vue学习笔记文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/han_xiao_xiao/article/details/134028141

版权

vue学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

表格圆角设置

//表格头部圆角
:deep(.el-table__header-wrapper) {
    border-radius: 8px;
    z-index: 100 !important;
    overflow: hidden;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
//此代码是让每行左侧变圆
:deep(.el-table td:first-child) {
    border-left: 1px solid #e2ecfa;
    border-radius: 8px 0 0 8px;
    padding: 2px;
    z-index: 999;
    background: #fff;
}
//此代码是让每行右侧变圆
:deep(.el-table td:last-child) {
    border-right: 1px solid #e2ecfa;
    border-radius: 0 8px 8px 0;
    z-index: 999;
    padding: 2px;
    background: #fff;
}

表头样式设置

// 修改表头样式-加边框
::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
  // box-sizing: border-box;
}
// 滚动条样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #063570;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  opacity: 0.5;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #0257aa;
}

表格设置

// 表格内背景颜色
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: #90bff5; // 背景透明
    border: 0px;
    color: #121e61; // 修改字体颜色
    font-size: 14px;
    height: 35px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
}
// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
    padding: 0;
    height: 60px;
}