elementUI Tooltip换行

最新推荐文章于 2024-07-23 12:44:56 发布

xuelong-ming

最新推荐文章于 2024-07-23 12:44:56 发布

阅读量1k

点赞数 8

分类专栏： elementUI 文章标签： elementui

本文链接：https://blog.csdn.net/xuelong5201314/article/details/135476827

版权

elementUI 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文讲述了在Vue项目中使用elementUI时，如何解决表格内容过长导致tooltip仅显示一行的问题，通过使用插槽和CSS样式实现多行显示并控制文本溢出。

摘要由CSDN通过智能技术生成

需求

vue项目中使用elementUI，遇到表格内容太长，使用 tooltip 后只显示一行，显示不全。要求换行显示。

解决方法

先看elementUI给出的使用方法：
在这里插入图片描述
可以看到这里说了，可以使用插槽来显示内容。

效果

在这里插入图片描述

代码

<el-tooltip class="item" effect="dark" placement="top" :open-delay="1000">
	<div slot="content">
    	<div style="min-width: 80px; max-width: 500px;text-align: center;">{{ scope.row.content }}</div>
    </div>
	<div class="overflow-hiding">{{scope.row.content}}</div>
</el-tooltip>

.overflow-hiding {
  width: 100%;
  /* 定义容器宽度 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 溢出部分隐藏 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}