【elementui】单元格显示两行，内容超出显示省略号，鼠标悬浮显示全部

最新推荐文章于 2025-06-13 11:46:37 发布

bidepanm

最新推荐文章于 2025-06-13 11:46:37 发布

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

文章标签： elementui javascript vue.js

本文链接：https://blog.youkuaiyun.com/bidepanm/article/details/126040848

这段代码展示了如何在Vue中利用Element UI的Table组件，通过el-popover实现对表格内描述信息的 hover 显示。通过设置min-width、label和template，当内容过长时，会自动截断并以省略号显示，鼠标悬停时弹出气泡窗口完整展示描述内容。样式部分定义了.ellipsis和.el-popover，确保内容在有限的空间内优雅展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table-column min-width="20%" label="描述">
	<template slot-scope="scope">
	  <el-popover trigger="hover" placement="top"  width="300">
	    <p>{{scope.row.description}}</p>
	    <div slot="reference">
	      <span class="ellipsis">{{scope.row.description}}</span>
	    </div>
	  </el-popover>
	</template>
</el-table-column>

<style>
.ellipsis {
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}
.el-popover{
  height: auto;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
}
</style>