您的位置:首页 > 房产 > 建筑 > 去掉el-table表头右侧类名是gutter,width=17px的空白区域(包括表头样式及表格奇偶行样式和表格自动滚动)

去掉el-table表头右侧类名是gutter,width=17px的空白区域(包括表头样式及表格奇偶行样式和表格自动滚动)

2024/10/5 20:54:10 来源:https://blog.csdn.net/qq_53857666/article/details/139320112  浏览:    关键词:去掉el-table表头右侧类名是gutter,width=17px的空白区域(包括表头样式及表格奇偶行样式和表格自动滚动)


代码如下:
 

      <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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com