el-table-column中加入插槽后元素浮动显示(tooltip)

一闪而过的残影

于 2019-08-14 16:17:01 发布

阅读量1.7k

点赞数 1

分类专栏： element-ui学习文章标签：前端table显示问题

element-ui学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Element UI的ElTable中通过自定义列模板和添加特定样式，实现当列内容溢出时显示完整的Tooltip，而非仅显示三个点。通过在表格列中使用slot-scope和设置display、overflow等CSS属性，可以有效解决列内容过长导致的显示不全问题。

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

show-overflow-tooltip 补全浮动少于三个点不显示加样式控制

加插槽,加样式

<el-table-column label="">
	 < template slot-scope="scope">
		< span class='class名' :title="{scope.row.元素}">{scope.row.元素}  < /span>
	< /template>
</el-table-column>
//样式
				.class名{
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				}