位置: IT常识 - 正文
前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示(前端字符长度限制)
编辑：rootadmin推荐整理分享前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示(前端字符长度限制)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端字间距怎么设置,前端字体间距,前端字符长度限制,前端字间距怎么调,前端字符长度限制,前端字体间距,前端字间距怎么调,前端字体最小是多大,内容如对您有帮助，希望把文章链接给更多的朋友！
element表格内容过多，鼠标悬浮显示全部内容（show-overflow-tooltip)，内容过长显示悬浮抖动 el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示 在table中设置了show-overflow-tooltip后,当某一列字符内容超长时,鼠标移入会出现闪烁不显示提示
解决方法：方法一：可以使用el-popover代替tooltip
可以使用el-popover代替tooltip, 且重写el-popover的样式, 保持跟tooltip提示框样式一致：
<el-table-column prop="problemDesc" label="问题描述" min-width="95"> <template slot-scope="scope"> <span v-if="scope.row.problemDesc && scope.row.problemDesc.length > 10"> <el-popover placement="top-start" title="" width="800" trigger="hover" popper-class="workorder-problem-desc"> <div>{{ scope.row.problemDesc }}</div> <span slot="reference"> {{ scope.row.problemDesc.substr(0,10) + '...' }} </span> </el-popover> </span> <span v-else>{{ scope.row.problemDesc }}</span> </template></el-table-column>【重点】：修改el-popover样式需要放在不含scoped的style样式中，为了防止污染全局的el-popover样式，可以给popper添加类名： 所以修改el-popover样式为： 注意：这个一定要自己写类名，否则放在不含scoped的style中会污染全局样式
<style>.workorder-problem-desc { background-color: #303133; color: #fff; border-color: #303133;}</style>效果图：
方法二：使用show-overflow-tooltip超过一定的行数显示...
使用show-overflow-tooltip超过一定的行数，通过样式控制显示...
<el-table-column prop="problemDesc" label="问题描述" min-width="95" show-overflow-tooltip></el-table-column>样式：
<style>.el-tooltip__popper { /* max-width:30%; padding-bottom: 5px!important; */ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 12; -webkit-box-orient: vertical;}</style>其中-webkit-line-clamp是要显示的行数，例子显示12行。
效果图：
方法三：使用el-tooltip太长的时候显示滚动条【好用，推荐】
<el-table-column prop="problemDesc" label="问题描述" min-width="95"> <template slot-scope="scope"> <el-tooltip v-if="scope.row.problemDesc" popper-class="workorder-reason-popper" effect="dark" :content="scope.row.problemDesc" placement="top" :disabled="isShowTooltip"> <div @mouseover="onMouseOver(scope.row.workorderNo)" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> <span :ref="scope.row.workorderNo">{{ scope.row.problemDesc }}</span> </div> </el-tooltip> <span v-else>—</span> </template> </el-table-column>isShowTooltip: false,获取可视宽度
onMouseOver(str) { // 内容超出，显示文字提示内容 let tag = this.$refs[str]; let parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度 let contentWidth = tag.offsetWidth; // 获取元素可视宽度 this.isShowTooltip = contentWidth <= parentWidth; },注意样式写在不带scoped的style里面，为了避免影响其它样式，使用了自定义样式popper-class=“workorder-reason-popper”
<style>.workorder-reason-popper { max-height: 300px; overflow: auto;}.workorder-reason-popper .popper__arrow { display: none;}</style>效果图，带滚动条的鼠标hover显示全部：
上一篇：2019年下半年1+X 证书 Web 前端开发初级理论考试题目原题+答案(超详细分析)(2019年下半年中小学教师资格考试综合素质试题)
下一篇：苹果 macOS Big Sur 11.3 预览版 Beta 2 发布! 新增 Apple Music 自动播放(苹果客服人工24小时)
