element table中使用show-overflow-tooltip不显示省略号

最新推荐文章于 2024-12-05 21:03:40 发布

原创最新推荐文章于 2024-12-05 21:03:40 发布 · 2.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web

当前文章被收录于：

Web

8 篇文章 0 人学习

Web开发，Vue，Element，LayUI、Vant等

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何解决Element UI表格中文字过长导致的显示不全问题，通过将div标签替换为span标签来实现tooltip提示，确保长文本能够正确显示。

table中文字太长，设置了show-overflow-tooltip，如下，

<el-table-column label="labelname" show-overflow-tooltip>
	<template slot-scope="scope">
		<div v-if="">{{scope.row.value1}}}</div>
   	 	<div v-else>{{scope.row.value2}}</div>
   </template>
</el-table-column>

结果：显示到结尾，会直接遮挡，不显示省略号
解决，将div改为span：

<el-table-column label="labelname" show-overflow-tooltip>
	<template slot-scope="scope">
		<!-- 注意这里 div改为span -->
		<span v-if="">{{scope.row.value1}}}</span> 
   	 	<span v-else>{{scope.row.value2}}</span>
   </template>
</el-table-column>