代碼如下：
?
<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>
