vue elementUI table表格自定义样式滚动

<template>
  <div class="table-wrapper">
    <el-table
      :header-cell-style="getRowClass"
      :row-class-name="tableRowClassName"
      :data="tableData"
      style="width: 100%;color:#fff; font-size: 12px;margin:0 auto;"
      ref="tableXj1"
      height="278px"
    >
      <el-table-column
        label="设备名称"
        prop="MACHINENAME"
        min-width="40"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="设备名称"
        prop="MACHINENAME"
        min-width="40"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="设备名称"
        prop="MACHINENAME"
        min-width="40"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="异常现象"
        prop="FAULTDESCRIBE"
        min-width="40"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="设备名称"
        prop="MACHINENAME"
        min-width="40"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="设备名称"
        prop="MACHINENAME"
        min-width="40"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

export default {
  data() {
    return {
      intervalId: null,
      tableData: [
        { MACHINENAME: 10001, FAULTDESCRIBE: 'Test1' },
        { MACHINENAME: 10002, FAULTDESCRIBE: 'Test2' },
        { MACHINENAME: 10003, FAULTDESCRIBE: 'Test3' },
        { MACHINENAME: 10004, FAULTDESCRIBE: 'Test4' },
        { MACHINENAME: 10004, FAULTDESCRIBE: 'Test4' },
        { MACHINENAME: 10004, FAULTDESCRIBE: 'Test4' },
        { MACHINENAME: 10004, FAULTDESCRIBE: 'Test4' },
        { MACHINENAME: 10004, FAULTDESCRIBE: 'Test4' },
        { MACHINENAME: 10004, FAULTDESCRIBE: 'Test4' },
        { MACHINENAME: 10004, FAULTDESCRIBE: 'Test4' },
      ],
    }
  },

  mounted: function () {
    const tableXj1 = this.$refs.tableXj1
    const divDataXj1 = tableXj1.bodyWrapper
    this.intervalId = setInterval(() => {
      divDataXj1.scrollTop += 2
      if (divDataXj1.clientHeight + divDataXj1.scrollTop == divDataXj1.scrollHeight) {
        divDataXj1.scrollTop = 0
      }
    }, 100)
  },
  methods: {
    // 设置隔行变色
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'yellow'
      } else {
        return 'orange'
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:rgba(31, 94, 167, 0.4);color:#326aff";
    },
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
}
</script>
<style scoped>
.table-wrapper /deep/ .el-table .el-table__body-wrapper {
    overflow-y: hidden !important;
}
.table-wrapper /deep/.el-table,
.el-table__expanded-cell {
    background-color: transparent !important;
}
.table-wrapper /deep/ tr,
.table-wrapper /deep/ th,
.table-wrapper /deep/ td {
    border-bottom: 0px;
}
.table-wrapper >>> .el-table__row > td {
    border: none;
}
.table-wrapper >>> .el-table th.el-table__cell.is-leaf {
    border-bottom: none !important;
}
.table-wrapper >>> .el-table__inner-wrapper::before {
    height: 0;
}
::v-deep .el-table__body {
    -webkit-border-vertical-spacing: 13px;
    border: none !important;
}
::v-deep .yellow {
    border: none !important;
    background: linear-gradient(90deg, rgba(31, 94, 167, 0) 3%, rgba(31, 94, 167, 0.4) 40%, rgba(31, 94, 167, 0.4) 70%, rgba(31, 94, 167, 0) 100%) !important;
}
::v-deep .orange {
    background: linear-gradient(90deg, rgba(31, 94, 167, 0) 3%, rgba(31, 94, 167, 0.2) 50%, rgba(31, 94, 167, 0.2) 70%, rgba(31, 94, 167, 0) 100%) !important;
}
.table-wrapper /deep/ .el-table th > .cell {
    color: #fff !important;
    border: none !important;
}
.table-wrapper /deep/ .el-table--fit {
    padding: 20px;
}

.table-wrapper /deep/ .el-table tr {
    background-color: transparent !important;
    border: none !important;
}
.table-wrapper /deep/ .el-table th > .cell {
    color: #fff !important;
}
.table-wrapper /deep/ .el-table--fit {
    padding: 20px;
}
.table-wrapper /deep/ .el-table,
.el-table__expanded-cell {
    background-color: transparent;
}

.table-wrapper /deep/ .el-table tr {
    background-color: transparent !important;
}
.table-wrapper /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
    background-color: transparent;
}
</style>
相关推荐
我曾经是个程序员22 分钟前
鸿蒙学习记录
开发语言·前端·javascript
顽疲25 分钟前
springboot vue 会员收银系统 含源码 开发流程
vue.js·spring boot·后端
羊小猪~~36 分钟前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
摸鱼了1 小时前
🚀 从零开始搭建 Vue 3+Vite+TypeScript+Pinia+Vue Router+SCSS+StyleLint+CommitLint+...项目
前端·vue.js
程序员shen1616111 小时前
抖音短视频saas矩阵源码系统开发所需掌握的技术
java·前端·数据库·python·算法
Ling_suu2 小时前
SpringBoot3——Web开发
java·服务器·前端
Yvemil72 小时前
《开启微服务之旅:Spring Boot Web开发》(二)
前端·spring boot·微服务
hanglove_lucky2 小时前
本地摄像头视频流在html中打开
前端·后端·html
维李设论2 小时前
Node.js的Web服务在Nacos中的实践
前端·spring cloud·微服务·eureka·nacos·node.js·express
2401_857600952 小时前
基于 SSM 框架 Vue 电脑测评系统:赋能电脑品质鉴定
前端·javascript·vue.js