The el-table table setting in ElementUI is fully transparent (component-based development and html)

Used in html, just add the following code in css

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

Component development

Less needs to be added to /deep/take effect, and note that if the scope is scoped <style scoped>
as follows

/*最外层透明*/
/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 is used >>>instead. Note that scoped
is <style scoped lang="stylus" rel="stylessheet/stylus">required , that is, scoped needs to be added or the depth effect will >>>not take effect.

/*最外层透明*/
>>>  .el-table, >>>  .el-table__expanded-cell
  background-color transparent


/* 表格内背景颜色 */
>>>  .el-table th, >>>  .el-table tr, >>>  .el-table td
  background-color transparent

If it works, please like it so that more people know how to deal with it.

Some other operations on the form

Remove the underline of the bottom table

Insert picture description here

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

Set the font color of the table header

Insert picture description here

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

Set scroll bar style

Insert picture description here

/*表格滚动条和字体颜色*/
.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)

Remove the default hover style

This pit of thieves was mentioned in the community a long time ago and has not been resolved. Set an id
for the el-tableelement. I call it here playList. You can do whatever you want. Pay attention to the same in the getElementById below, just put it in the hook function. For example, the setInterval time is 0, which means it is always removed, because this familiarity seems to be added dynamically. If used directly, it document.getElementById("playList").classList.remove("el-table--enable-row-hover")will be removed and added

mounted() {
    
    
  setInterval(() => {
    
    
      document.getElementById("playList").classList.remove("el-table--enable-row-hover")
  })
}