热门标签
热门文章
- 1线程的创建
- 2hsv量化后用颜色直方图进行图像相似度比对_为什么求直方图对比要变换到hsv空间
- 3[VB.NET]动态生成的repeater,为什么无法显示？_repeater控件使用后什么也没有
- 4腾讯前辈熬夜肝了一个月整理的《Linux内核学习笔记》，啃完受益匪浅不走弯路
- 5【Linux】进程周边004之进程的调度与切换（领略Linux系统进程调度算法的神奇）
- 6Dify学习笔记-入门学习（二）
- 7爬虫工作量由小到大的思维转变---＜第三十六章 Scrapy 关于CrawlSpider引发的议题＞
- 8powershell 批量解压带密码的ZIP文件_powershell extract-passwordzip
- 9Jenkins自动部署后端maven项目、前端vue项目，包含在远程服务器的部署方法_jenkins远程部署
- 10Python——jieba优秀的中文分词库（基础知识+实例）
当前位置: article > 正文
vue-element 内容显示过多隐藏（不仅限于table的列，可应用于div标签）_element ui table字段数据过多如何隐藏
作者：weixin_40725706 | 2024-02-16 07:37:02
赞
踩
element ui table字段数据过多如何隐藏
最简单的实现方法是在隐藏过长的table列，直接在 标签中添加一个属性show-overflow-tooltip即可。
但我的表格中，在同一列中不止有一种标签，我只想让这一列的某一部分实现这个效果，所以这种方法很不方便。
效果图如上
<el-table-column min-width="35%" show-overflow-tooltip>
<template slot-scope="scope">
<div style="line-height: 30px; font-size: 15px">
{{ scope.row.name }}
</div>
<div class="desc" style="color: gray; font-size: 13px">
{{ scope.row.desc }}
</div>
</template>
</el-table-column>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
desc字段是我需要实现过长隐藏成省略号的部分，在
.desc {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
- 1
- 2
- 3
- 4
- 5
- 6
样式中具体的方法属性可以参考：
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
参考的文章是：https://blog.csdn.net/weixin_44827418/article/details/105951905，里面还有部分拓展内容，但我没用到就不贴出来了。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/91796
推荐阅读
相关标签
