Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）

官方效果是这样的：

此处改成了这样的效果：

此处是可以进行滑动的，就是去除了滑动条，仍能滑动的效果。

下面说下修改样式，找到使用el-table的vue组建：

在style中贴上：

<style>
 
  table-wrapper /deep/ .el-table--fit{
    padding: 20px !important;
    border: none !important;
  }
 
  .table-wrapper .el-table, .el-table__expanded-cell {
    background-color: transparent !important;
    border: none !important;
  }
 
  .table-wrapper /deep/ .el-table tr {
    background-color: transparent !important;
    border: none;
  }
 
  .el-table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: transparent !important;
    border: none;
  }
 
  /*表中数据的颜色及背景等*/
  .el-table th, .el-table tr {
    border: 0!important;
    background-color: transparent!important;
    color: white !important;
  }
 
  /*去每一行记录下的横线*/
  .el-table--border tr,td{
    border: none!important;
  }
 
  /*去最下面的横线*/
  .el-table::before{
    height:0;
  }
 
  /*table内的高亮*/
  .el-table tbody tr:hover>td {
    background-color:rgb(79, 163, 213)!important
  }
 
</style>

这里在style上不能加scope。

然后在组建外面套一个div在其class上使用table-wrapper：

此处修改样式的逻辑是直接F12，打开开发者工具：

那个css影响了就改哪一个。

修改了的css要使用!important;避免被覆盖。通过这种方式去改element ui中的默认样式。