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

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

/*最外层透明*/
.el-table, .el-table__expanded-cell{
    background-color: transparent;
}
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
    background-color: transparent;
}
1
2
3
4
5
6
7
8
9
10

组件化开发

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;
}
1
2
3
4
5
6
7
8
9
10

---

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

1
2
3
4
5
6
7
8
9

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

---

关于表格的其它一些操作

去除最底层表格的下划线

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

---

设置表格头的字体颜色

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

---

设置滚动条样式

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

移除默认的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")
  })
}
1
2
3
4
5
6

附上整体效果截图