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

更新时间：2024年08月12日 09:45:32 作者：ratel️

这篇文章主要介绍了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>

到此这篇关于vue elementUI table表格自定义样式滚动的文章就介绍到这了,更多相关vue elementUI table表格滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

代号为Naruto的Vue 2.7正式发布功能详解
这篇文章主要为大家介绍了代号为Naruto的Vue 2.7正式发布功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
在Vue3中处理异步API调用并更新表单数据的方法示例
这篇文章主要介绍了如何在Vue3中处理异步API调用并更新表单数据（附Demo）,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-06-06
详解Vue中的MVVM原理和实现方法
这篇文章主要介绍了Vue中的MVVM原理和实现方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
Vue编译报错内存溢出问题解决方式
这篇文章主要为大家介绍了Vue编译报错内存溢出问题解决方式,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
VUE中的无限循环代码解析
本文通过实例代码给大家介绍了vue中的无限循环，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-09-09
使用Vue-Router 2实现路由功能实例详解
vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能,需要的朋友可以参考下
2017-11-11
分享12个Vue开发中的性能优化小技巧(实用!)
一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢,下面这篇文章主要给大家分享介绍了十二个Vue开发中的性能优化小技巧,需要的朋友可以参考下
2022-02-02
WebSocket使用以及在vue如何使用问题
这篇文章主要介绍了WebSocket使用以及在vue如何使用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue鼠标点击事件和键盘事件举例详解
在Vue框架中我们经常需要绑定各种JS事件,如"点击事件"、"鼠标移动事件"、"键盘事件"等等,这篇文章主要给大家介绍了关于Vue鼠标点击事件和键盘事件的相关资料,需要的朋友可以参考下
2024-01-01
vue3日历控件的具体实现
日历在很多地方都可以使用的到，本文主要介绍了vue3日历控件的具体实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具