项目中优化element-ui表格优化

1. 优化滚动条样式

1. 创建base.less文件

// chrome滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/*滑块*/
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(144,147,153,.3);
  transition: background-color .3s;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144,147,153,.5);
}
/*滑道*/
::-webkit-scrollbar-track {
  height: 6px;
}

2. 在main.js中引入改文件即可

2. 自定义部分样式

1. 创建base.less文件

.el-table{
  td, th{
    padding: 8px 0;
  }
  .el-table__body-wrapper{
    td .el-button{
      padding: 0;
      [class^="el-icon-"], [class*=" el-icon-"]{
        font-size: 16px;
      }
    }
  }
  .el-table__fixed, .el-table__fixed-right{
    th, tr {
      background-color: #f3f3f3!important;
    }
    td .el-button{
      padding: 0;
      [class^="el-icon-"], [class*=" el-icon-"]{
        font-size: 16px;
      }
    }
  }
}

2. 在main.js中引入改文件即可
3. 自定义其他组件样式方法同上