当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/361691.html

相关文章:

  • 3079. 求出加密整数的和
  • 奶茶店、女装店、餐饮店是高危创业方向,原因如下:
  • 嵌入式笔试面试刷题(day16)
  • 【MyBatis】MyBatis操作数据库(二):动态SQL、#{}与${}的区别
  • [Zer0pts2020]easy strcmp 分析与加法
  • 力扣7. 整数反转
  • Mac/Linux getline 无法读取文件内容(读取内容无法显示)
  • NBM 算法【python,算法,机器学习】
  • spark3.0.1版本查询Hbase数据库例子
  • android高效读图方式——Hardwarebuffer读图
  • 悉数六大设计原则
  • hdfs复习
  • css-Ant-Menu 导航菜单更改为左侧列表行选中
  • 02-CSS3基本样式
  • USART串口外设
  • 大模型应用之基于Langchain的测试用例生成
  • C++之map
  • 【量算分析工具-方位角】GeoServer改造Springboot番外系列六
  • 【机器学习】机器学习与大模型在人工智能领域的融合应用与性能优化新探索
  • 上传图片并显示#Vue3#后端接口数据
  • 音视频开发14 FFmpeg 视频 相关格式分析 -- H264 NALU格式分析
  • Qt学习记录(15)数据库
  • c++常用设计模式
  • 【动手学深度学习】softmax回归从零开始实现的研究详情
  • MySQL:MySQL执行一条SQL查询语句的执行过程
  • 解决Python导入第三方模块报错“TypeError: the first argument must be callable”
  • 在python中连接了数据库后想要在python中通过图形化界面显示数据库的查询结果,请问怎么实现比较好? /ttk库的treeview的使用
  • OZON的选品工具,OZON选品工具推荐
  • 营销方案撰写秘籍:包含内容全解析,让你的方案脱颖而出
  • 如何制作一本温馨的电子相册呢?