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

Vue处理表格长字段显示问题

背景

有些单元个中会有比较长的内容,如果使用默认格式,会导致单元格的高度比较怪异,需要将超长的内容进行省略。

当前效果:

在这里插入图片描述

优化效果:

在这里插入图片描述

优化代码:

在内容多的单元格增加下面代码

 <el-table-columnprop="requestHeader"label="requestHeader"><-- 增加的内容  --><template #default="scope"><div class="cell-content">{{ scope.row.requestHeader }}</div></template><-- 增加的内容  -->
</el-table-column>
<style scoped>.cell-content {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>

http://www.mrgr.cn/news/6551.html

相关文章:

  • 八股(3)——计网
  • Android studio的replace替换
  • 十五、OpenCVSharp实现相机标定
  • AI绘画工具 Stable Diffusion【插画转绘】:建筑 | 风景| 人像照片的插画转绘制作教程,照片秒变插画风格图片!
  • gogs运行报“gogs“: cannot run executable found relative to current directory
  • ECharts tooltip默认html样式,保留样式只对数值格式化
  • Python 爬虫框架
  • 如何通过rsync+sersync 实现同步备份
  • 并发知识笔记
  • Spring父子容器
  • HarmonyOS 地图服务:深度解析其丰富功能与精准导航实力
  • kafka的一个有趣问题(BUG)
  • VS2017编译osg3.6.0和osgearth2.10
  • Java SpringBoot+Vue实战教程:如何一步步实现Cosplay论坛设计与实现
  • 自动生成依赖清单:pipreqs,Python项目的救星
  • Onnx使用预训练的 ResNet18 模型对输入图像进行分类,并将分类结果显示在图像上
  • 代码随想录训练营 Day37打卡 动态规划 part05 完全背包理论基础 518. 零钱兑换II 377. 组合总和 Ⅳ 卡码70. 爬楼梯(进阶版)
  • Notification 分不同实例关闭
  • 什么是关键词难度?
  • RISC-V全志D1多媒体套件文章汇总