您的位置:首页 > 新闻 > 资讯 > 厦门做网站设计_最新军事报道 新闻事件_株洲做网站_网络舆情监测专业

厦门做网站设计_最新军事报道 新闻事件_株洲做网站_网络舆情监测专业

2025/6/3 5:04:25 来源:https://blog.csdn.net/iOS_MingXing/article/details/142922909  浏览:    关键词:厦门做网站设计_最新军事报道 新闻事件_株洲做网站_网络舆情监测专业
厦门做网站设计_最新军事报道 新闻事件_株洲做网站_网络舆情监测专业

elementui-table组件列表中的tooltip内容过长超出屏幕换行显示内容,虽然el-table列属性中带的有show-overflow-tooltip,可以设置内容超出列宽度显示为…,且有tooltip提示全部内容,但是内容过多时,提示会超出屏幕: 只有全屏才能展示 很不友好
在这里插入图片描述
el-table组件自带的属性无法修改为自动换行,也无法控制弹框的宽度太长了不友好
解决方法:

<el-table-column v-if="value.prop == 'remark'" :key="index" :prop="value.prop" :label="value.label":width="value.width || 220"><template slot-scope="scope"><el-tooltip placement="top"><div slot="content" class="text_content">{{ scope.row.remark }}</div><div class="text_els">{{ scope.row.remark }}</div></el-tooltip></template></el-table-column>

css
然后设置显示内容样式,宽度为多少就是tooltip多宽时换行,text_content为tip的样式,text_els为表格里的样式

  .text_content {display: block;max-width: 700px;white-space: wrap;font-size: 14px;}.text_els {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

效果
在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com