【el-table+vue】透明表格、自动滚动表格的实现

表格原始：

A.设置透明

实现代码：

<div class="textBox">
      <el-table
        ref="table"
        :data="tableData"
        height="250"   //设置高度是固定表头，为了后面自动滚动做准备
        :cell-style="{ 
          padding: '6px', 
          'border-bottom': '2px solid #173d91' 
        }"
        :header-cell-style="{
          hieght: '26px',
          'border-bottom': '2px solid #173d91',
        }"
        header-align="center"
        style="border-color: #868686"
      >
        <el-table-column prop="threatLevel" label="告警级别" width="140"></el-table-column>
        <el-table-column prop="deviceName" label="告警设备" width="140"></el-table-column>
        <el-table-column prop="alarmTime" label="告警时间点" width="180"></el-table-column>
        <el-table-column prop="duration" label="持续时间(分)" width="140" ></el-table-column>
        <el-table-column prop="threatName" label="告警内容"></el-table-column>
      </el-table>
</div>

重点在：.textBox /deep/ .el-table（咱不用less

<style scoped>
.textBox {
  text-align: right;
}
.textBox .el-table {
  width: 90%;
  z-index: 9;
  font-size: small;
  font-weight: 500;
  position: fixed;
  bottom: 0;
  right: 5%;
  border-radius: 5px;
}
.textBox /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.textBox /deep/ .el-table th {
  color: #fefefe;
  background-color: rgba(49, 210, 235, 0.5);
}
.textBox /deep/ .el-table tr {
  color: #fefefe;
  background-color: transparent !important;
}
.textBox /deep/ .el-table__body tr:hover > td {
  background-color: rgba(49, 210, 235, 0.3) !important;
}
</style>

B.设置滚动

mounted时实现函数：infinitScroll()

    infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      divData.onmouseover = function () {
        clearInterval(t);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function () {
        start();
      }; //鼠标移出，继续滚动

      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      let t;
      function start() {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight >= divData.scrollHeight) {
          return;
        }
        t = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
      }
      start();
    },