element plus table 实现背景透明色

如下图，要实现cesium地图上面的表格，且这个表格需要是透明的颜色，并且要有定位

基于el-table实现的关键代码如下,主要利用el-table的如下属性，el-table表格的颜色分了三层，table,tr,td,分别有三个背景色，所以从下面一些属性入手 style
header-row-style
eader-cell-style
row-style
cell-style\

html部分代码

<div class="box">
    <div class="title">
      <div>标题</div>
    </div>
    <el-table
      :max-height="250"
      :style="{backgroundColor: 'rgba(0, 0, 0, 0)'}"
      :header-row-style="headerRowStyle"
      :header-cell-style="headerCellStyle"
      :row-style="rowStyle"
      :cell-style="cellStyle">
    </el-table>
</el-table>

js部分关键代码

function headerRowStyle({ row, rowIndex }){
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    color: 'white'
  }
}
function headerCellStyle({ row, column, rowIndex, columnIndex }) {
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    padding: '0px',
    borderBottom: '1px solid rgb(8, 171, 238)'
  }
}
function rowStyle({ row, rowIndex }) {
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    color: 'white'
  }
}
function cellStyle({ row, column, rowIndex, columnIndex }){
  return {
    padding: '0px',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    border: 'none'
  }
}

css部分关键代码
注意:这里不能加scope属性不然会导致一系列的效果显示不出来

<style lang="scss">
//table下面有根白线，去掉
.el-table__inner-wrapper::before {
  height: 0px;
}
.box {
  width: 350px;
  position: absolute;
  right: 5px;
  bottom: 20px;
  padding: 5px;
  background-color: rgba(9, 14, 36, 0.3);

  .title {
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding-bottom: 5px;
    background: url(../../../../assets/images/table-header-background.png) no-repeat center center;
    background-size: 100% 100%;
  }
}
</style>

最终实现效果如下: