总结 针对el-table-column超长换行的问题,你可以根据实际需求选择合适的解决方案。如果内容不是特别长,且对样式要求不高,可以使用show-overflow-tooltip属性;如果需要更精细的控制,可以尝试使用CSS样式或slot自定义内容。在选择解决方案时,请务必进行测试,以确保在各种情况下都能正确处理换行问题。
参数说明类型可选值默认值show-overflow-tooltip当内容过长被隐藏时显示 tooltipBoolean—false 添加该属性之后,如果内容超出列宽,超长部分会默认省略。当鼠标滑过该内容时,会弹出Tip提示 <!--示例--> <el-table-column prop="departName" label="部门" show-overflow-tooltip > </el-table-column> 注:该属性谨...
参数说明类型可选值默认值show-overflow-tooltip当内容过长被隐藏时显示 tooltipBoolean—false 添加该属性之后,如果内容超出列宽,超长部分会默认省略。当鼠标滑过该内容时,会弹出Tip提示 <!--示例--> <el-table-column prop="departName" label="部门" show-overflow-tooltip > </el-table-column> 注:该属性谨...
<template><div><!-- 判断规定的长度,超长截取,不超长正常展示 --><spanref="mySpan"v-if="String(value).length > len"><spanv-show="show">{{ value }}<spanclass="auto-btn"@click="toggleShow()">{{ show ? "收起" : "展开" }}</span></span><spanv-show="!show"><!-- 超长截取 ...
我最近也遇到了,只要设置了当文本超长只显示三个点时,就会出现这个问题。只在safari上有这个问题,我测试了chrome ,edge,firefox都没有问题。搞了好久都没解决,希望大神能帮忙啊,小弟在此谢过 commentedApr 26, 2018 safari上表头与表内容列没有对齐这个有解决方案没呀?
</el-table-column> 效果图: 但是! 当内容太多的时候,他也是一行显示,阅读性差 所以我们应该尝试使其换行 1 2 3 <style ang="scss"> .el-tooltip__popper{max-width: 400px} </style> 注意:将此样式放到scoped中是无效的 这样的(设置最大宽度)是比较好的,当然也可以设置固定的宽高,就是内容太多的时候...
增加slot,内容超长,且有一层 flex 布局包裹 渲染成功后,在此 cell 上触发 hover(若无反应则重现成功) 也可直接看 demo 实现:https://codepen.io/foreverZ133/pen/MWXZbdm?editors=1010 What is Expected? 兼容firefox 浏览器,表现为 el-table-column 开启 show-overflow-tooltip 后触发 hover 会显示 tooltip...
2019-12-23 16:22 −超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起其他的问题。 所以最好的解决方案可能还是不默认 break word,提供一个属性来针对某些列进行断行处理。 ... ...
2019-12-23 16:22 −超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起其他的问题。 所以最好的解决方案可能还是不默认 break word,提供一个属性来针对某些列进行断行处理。 ... ...
2019-12-23 16:22 −超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起其他的问题。 所以最好的解决方案可能还是不默认 break word,提供一个属性来针对某些列进行断行处理。 ... ...