代码如下:
<el-table
:data="tableData"
ref="scroll_Table"
:header-cell-style="getRowClass"
:cell-style="styleBack"
height="350px"
style="width: 100%"
>
<el-table-column prop="id" label="序号"> </el-table-column>
<el-table-column prop="type" label="能耗分项"> </el-table-column>
<el-table-column prop="value" label="能耗变化值"> </el-table-column>
<el-table-column prop="value" label="变化百分比"> </el-table-column>
</el-table>
tableData: [],
scrolltimer: "", //自动滚动的定时任务
mounted() {
this.autoScroll();
},
beforeDestroy() {
this.autoScroll(true);
},
methods: {
// 表头样式
getRowClass() {
return "background:#00235d; color:#22a2c8;border:1px solid #00235d;text-align:center";
},
// 表格奇偶层样式
styleBack({ rowIndex }) {
if ((rowIndex + 1) % 2 === 0) {
return "background:#3864b4; color:#22a2c8;border:1px solid #3864b4;text-align:center";
} else {
return "background:#011c51; color:#22a2c8;border:1px solid #011c51;text-align:center";
}
},
autoScroll(stop) {
const table = this.$refs.scroll_Table;
const divData = table.$refs.bodyWrapper;
if (stop) {
window.clearInterval(this.scrolltimer);
} else {
this.scrolltimer = window.setInterval(() => {
divData.scrollTop += 1;
if (
divData.clientHeight + divData.scrollTop ==
divData.scrollHeight
) {
divData.scrollTop = 0;
}
}, 150);
}
},
},
<style>
.el-table{
background: transparent;
margin-top:10px;
}
.el-table::before {
height:0;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}
/deep/.el-table__body{
width:100% !important;
}
// 去掉el-table表头右侧空白区域
/deep/.el-table th.gutter{
display: none;
width:0
}
/deep/.el-table colgroup col[name='gutter']{
display: none;
width:0
}
</style>