ElementUI中的el-table表格设置全透明（组件化开发和html两种方式）

川长思鸟来 2022-11-20 09:32 378阅读 0赞

### html中使用，css中加入如下代码即可 ###

/*最外层透明*/
    .el-table, .el-table__expanded-cell{ 
        background-color: transparent;
    }
    /* 表格内背景颜色 */
    .el-table th, .el-table tr, .el-table td { 
        background-color: transparent;
    }

### 组件化开发 ###

less则需要加上`/deep/`生效，还有注意作用域要是scoped`<style scoped>`  
如下

/*最外层透明*/
    /deep/ .el-table, /deep/ .el-table__expanded-cell{ 
      background-color: transparent;
    }
    /* 表格内背景颜色 */
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td { 
      background-color: transparent;
    }

--------------------

stylus则用`>>>`替代,注意需要有scoped,  
也就是`<style scoped lang="stylus" rel="stylessheet/stylus">`需要加上scoped否则深度作用`>>>`不生效

/*最外层透明*/
    >>>  .el-table, >>>  .el-table__expanded-cell
      background-color transparent
    
    
    /* 表格内背景颜色 */
    >>>  .el-table th, >>>  .el-table tr, >>>  .el-table td
      background-color transparent

有效果的，点个赞，让更多人知道怎么处理。

--------------------

关于表格的其它一些操作

### 去除最底层表格的下划线 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70_pic_center]

/* 删除表格下最底层的横线 */
    .el-table::before { 
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }

--------------------

### 设置表格头的字体颜色 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70_pic_center 1]

/* 表格表头字体颜色 */
    .el-table thead { 
      color: #ffffff;
      font-weight: 500;
    }

--------------------

### 设置滚动条样式 ###

![在这里插入图片描述][20201028055441831.png_pic_center]

/*表格滚动条和字体颜色*/
    .el-table
      border-bottom 0
      color hsla(0,0%,100%,.6)
      /* 设置滚动条的样式 */
      ::-webkit-scrollbar
        width 5px;/*滚动条粗细*/
    
      /* 滚动槽 */
      ::-webkit-scrollbar-track
        -webkit-box-shadow inset006pxrgba(0, 0, 0, 0.3)
        border-radius 10px
    
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb
        border-radius 10px
        background rgba(0, 0, 0, 0.3)
        -webkit-box-shadow inset006pxrgba(0, 0, 0, 0.5)

### 移除默认的hover样式 ###

这个贼坑，社区中很早以前就提过了，一直没有解决。  
给`el-table`元素设置一个id，我这里叫做`playList`，你可以随意，注意下面的getElementById中一致即可，放在钩子函数即可，例如setInterval时间为0，就是一直去除，因为这个熟悉似乎是动态加上去的，如果直接使用`document.getElementById("playList").classList.remove("el-table--enable-row-hover")`会造成移除了又被添加进去了

mounted() { 
      setInterval(() => { 
      // （也可以使用`this.$ref`获得表格元素让母后`.classList.remove("el-table--enable-row-hover")`）
          document.getElementById("playList").classList.remove("el-table--enable-row-hover")
      })
    }

附上整体效果截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1ba65fc4298b48deb94e8d327563cbe7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/76e2f101cda44a1b8c166274d94467c3.png
[20201028055441831.png_pic_center]: /images/20221120/d5aa74cf673e47bc9c052c7a1599834b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/4769902045b44c3094935fe335afbebd.png