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

Element中table组件(el-table)右侧滚动条空白占位gutter处理

当我设置了max-height,就会在表格右侧出现一列空白的占位导致表格内容没对齐

<el-table border max-height="56" header-cell-class-name="header_class" stripe size="small"style="width: 100%">
<el-table-column fixed="left" prop="monitorTime" label="监测时间" :formatter="formatDateTime"> </el-table-column><el-table-column fixed="left" label="水质等级"></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">水温<br>℃<br></div></template></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">PH<br>无量纲<br></div></template></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">溶解氧<br>mg/L<br></div></template></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">电导率<br>μS/cm<br></div></template></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">浑浊度<br>NTU<br></div></template></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">高锰酸盐指数<br>mg/L<br></div></template></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">氨氮<br>mg/L<br></div></template></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">总磷<br>mg/L<br></div></template></el-table-column><el-table-column fixed="left"><template slot="header"><div style="line-height: 1.5; text-align: center;">总氮<br>mg/L<br></div></template></el-table-column></el-table>

element的table组件有一个max-height参数可以设置表格组件的最大高度。

如果数据过多,在最大高度内展示不开,就会自动加一个滚动条,进行滚动展示。

如果数据很少,没有达到最大高度,那么右侧不应该有滚动条,和一切干扰列。

但是当我设置了max-height ,且我这个地方没有达到最大高度,就会在表格右侧出现一列空白的占位,这样比较丑。

解决方法1:

不设置max-height参数。

解决方法2:

有特定的需求需要保留max-height参数,调整max-height的高度

<el-table border max-height="60" header-cell-class-name="header_class" stripe size="small"style="width: 100%"></el-table>

解决方法3:

效果图:

使用解决方法2

http://www.dtcms.com/a/351952.html

相关文章:

  • window电脑使用OpenSSL创建Ed25519密钥
  • 由倍讯科技研制的CCLinkIE转ModbusTCP网关,可达成与脉冲计数器的连接
  • Tesseract OCR之单词识别与字符分类器
  • Docker:部署Redis
  • 常见flex布局思路:flex布局上下结构
  • 2025中国生物制造科技创新论坛为何“花落”常德?
  • 新源布料厂进销存管理系统-项目分享
  • week5-[字符数组]查找
  • 木马免杀工具使用
  • 智汇云舟:视频孪生技术引领行业变革的场景应用实践
  • 第二十三天-FSMC简介
  • 技术速递|Model Context Protocol (MCP) 支持已上线 JetBrains、Eclipse 和 Xcode
  • 计算机网络:天气预报
  • SpringBoot + Redisson 实现分布式锁实战(附业务案例)
  • 【系统架构设计(一)】系统工程与信息系统基础上:系统工程基础概念
  • 29.RNN-循环神经网络
  • 微信小游戏订阅功能
  • 【SQL】深入理解MySQL存储过程:MySQL流程控制语句详解
  • SQL server 触发器的使用
  • PostgreSQL诊断系列(4/6):表空间与膨胀分析——解决“越用越大”的存储难题
  • woocommerce后台一次搜索多个ID订单的实现方法
  • 两周年创作纪念,忆笑傲江湖岁月
  • 探寻跨语言统一真理及其对NLP的未来启示
  • 项目管理软件与 Excel:哪个适合您的团队?
  • 超越MySQL:TDengine的时序数据处理革新与实践指南
  • [新启航]新启航激光频率梳 “光量子透视”:2μm 精度破除遮挡,完成 130mm 深孔 3D 建模
  • 在线提取维基百科Wikipedia文章页面及离线批处理Wikipedia XML Dump文件
  • 抽签占卜抖音快手微信小程序看广告流量主开源
  • 6.6 Element UI 加载指示器
  • 机器学习每日一题000-矩阵和向量的乘法python实现