<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表格自定义样式滚动
ratel️2024-08-12 13:05
相关推荐
Redstone Monstrosity10 分钟前
字节二面东方翱翔18 分钟前
CSS的三种基本选择器Fan_web40 分钟前
JavaScript高级——闭包应用-自定义js模块yanglamei19621 小时前
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明,后端采用flask,前端采用vue千穹凌帝1 小时前
SpinalHDL之结构(二)冯宝宝^1 小时前
基于mongodb+flask(Python)+vue的实验室器材管理系统dot.Net安全矩阵1 小时前
.NET内网实战:通过命令行解密Web.configHellc0071 小时前
MacOS升级ruby版本前端西瓜哥1 小时前
贝塞尔曲线算法:求贝塞尔曲线和直线的交点又写了一天BUG1 小时前
npm install安装缓慢及npm更换源