热门标签
热门文章
- 1Python：for...in range() 、 for...in enumerate() 、for...in() 、for...in zip()的用法_for in zip
- 2ASP.NET大作业/ASP.NET期末项目/大作业
- 3【100%通过率 】【华为OD机试c++】信号发射和接收【2023 Q1考试题 A卷|200分】_有一个二维的天线矩阵,每根天线可以向
- 41.Linux命令-删除_linux 删除文件命令
- 5【Tensorflow】多分类问题的Precision、Recall和F1计算及Tensorflow实现_机器学习多分类求f1代码
- 6【信息系统项目管理师】--【信息化发展】--【章节练习】
- 7阿里云 ECS迁移数据至腾讯云云服务器_阿里云迁移到腾讯云
- 8EXCEL在.NET操作下的错误System.InvalidCastException: QueryInterface for interface Excel._Application failed._vb.net调用exelce打印服务时报错
- 9python-opencv-cv2.inRange函数()函数详解
- 10【kafka】-入门篇_kafka kraft 配置
当前位置: article > 正文
element-ui里的el-table是怎么实现超出内容省略并加tooltip提示的？_element table每个项超出宽度显示title
作者：繁依Fanyi0 | 2024-02-20 17:17:59
赞
踩
element table每个项超出宽度显示title
效果图
效果描述：
只有超出10个字的标题才会显示el-tooltip,没有超出的不会显示
思路：表格中的数据超出10个字显示隐藏，用hover效果显示el-tooltip并显示全部的文字
代码：
<el-table-column label="标题" width="180"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="bottom" popper-class="tips" > <span v-if="scope.row.title.length >= 10">{{ scope.row.title }}</span> </el-tooltip> <span v-if="scope.row.title.length < 10">{{ scope.row.title }}</span> </template> </el-table-column>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
/deep/.el-table td {
border-bottom: 1px solid #2E2C3D;
background: #242133;
.cell span {
display: block;
width: 10em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
**提示：**把cell样式里面的em单位换成width也可以实现，具体看需求
自定义宽度（给提示加样式）
<el-table-column label="详情描述" align="center" width="100px"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" placement="bottom" popper-class="tips" > <template slot="content"> <p style="max-width: 1000px">{{ scope.row.description }}</p> </template> <span style="max-width: 60%" v-if="scope.row.description.length >= 5" >{{ scope.row.description.slice(0, 5) + "..." }}</span > </el-tooltip> <span v-if="scope.row.description.length < 5">{{ scope.row.description }}</span> </template> </el-table-column>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
通过template标签插槽添加提示语，便于给提示语添加布局改变数据结构或是样式
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/120420
推荐阅读
相关标签
