vue+elmentui实现table行有边框、自动滚动组件

table组件

功能概述

技术栈：vue + elmentui
组件功能：行边框 + 自动滚动
参数：表格宽高+最大高度+数据+表头

效果图

组件代码

<template>
  <div class="table" v-cloak>
    <el-table
      :data="tableData"
      :height="_max_height"
      ref="table"
      :style="{'width':_width,'height':_height}"
      size="small"
      :max-height="_max_height"
      highlight-current-row
      :row-class-name="tableRowClassName"
      :row-style="{height:'32px'}"
      :cell-style="{padding:'0px'}" >
      <el-table-column type="index" label="序号" width="50px"></el-table-column>
      <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.prop" :width="item.width" :label="item.label"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    _width: {
      type: String,
      default: '',
    },
    _height: {
      type: String,
      default: '',
    },
    _max_height: {
      type: String,
      default: '',
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      // if (rowIndex%2 === 0) {
      //   return 'warning-row';
      // } else{
      //   return 'success-row';
      // }
      row.index = rowIndex;
      return 'row-style'
    }
  },

  mounted() {
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.table;
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper;
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
        // 重置table距离顶部距离
        // divData.scrollTop = 0;
        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
        divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
      }
    },180);  // 滚动速度
  },

}
</script>

<style>
[v-cloak]{
  display: none !important;;
}
</style>

<style scoped>

/*.table /deep/ .el-table .warning-row {*/
/*  background: #041A42;*/
/*}*/

/*.table /deep/ .el-table .success-row {*/
/*  background: #05295A;*/
/*}*/
/* 给表格每行加框线 */
/deep/ .row-style{
  border: 1px solid #44506B;
  box-shadow: inset 0px 0px 6px 0px #44506B;
}

/*设置表头高度*/
.table /deep/ .el-table__header tr,
.table /deep/ .el-table__header th {
  height: 26px !important;
  padding: 0;
}

/*最外层透明*/
.table /deep/ .el-table,
.table /deep/ .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格内背景颜色 */
.table /deep/ .el-table th,
.table /deep/ .el-table tr,
.table /deep/ .el-table td {
  background-color: transparent;
  color: #ffffff;
  text-align:center;
}

/* 头部样式*/
.table /deep/ .el-table thead {
  background-color: #042652;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
}

/*去掉头部边框 (header的字体大小,颜色)*/
.table /deep/ .el-table thead tr th.is-leaf {
  border: none;
  font-size: 12px;
  color: white;
}

/* 去除底部白线*/
.table /deep/ .el-table::before{
  height: 0px;
}

/* 单元格间距 */
.table /deep/ .el-table__body{
  -webkit-border-horizontal-spacing: 0px !important;  /* 水平间距 */
  -webkit-border-vertical-spacing: 5px !important;  /* 垂直间距 */
}


/* 去除单元格给的表格线 */
.table /deep/ .el-table__row>td{
  border: none;
}

/* 鼠标悬停背景色 */
.table /deep/ .el-table__body tr:hover > td {
  background-color: rgb(67, 72, 78) !important;
}

</style>

<!-- 轮播 -->
<style lang="scss" scoped>
::v-deep .el-table__body-wrapper::-webkit-scrollbar {

  height: 10px; /*横向滚动条的高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: 0px 1px 3px rgba(18, 183, 194, 0.2); /*滚动条的背景区域的内阴影*/
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: rgba(18, 183, 194, 0.2); /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  box-shadow: 0px 1px 3px rgba(25, 217, 255, 0.3); /*滚动条的内阴影*/
  border-radius: 10px; /*滚动条的圆角*/
  background-color: rgba(18, 183, 194, 0.4); /*滚动条的背景颜色*/
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}
</style>