element |
您所在的位置：网站首页 › 灌砂法的原理和作用 › element |
|
element-UI table文字超出两行，隐藏多余文字，移入显示tips
element-UI表格的列属性超出两行隐藏多余文本，移入时tips显示全部内容超出的文本的隐藏文本超过两行，移入时tips显示全部内容通过长度判断
element-UI表格的列属性
通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行的文字用省略号替代，并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求，显然设置这个属性是无法完成的。 超出两行隐藏多余文本，移入时tips显示全部内容我们想完成的是超出两行才用省略号隐藏多余文本，并且移入才会有tips显示；两行以内的文本则不隐藏也不显示tips。 超出的文本的隐藏 .myNote{ display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient:vertical; } 文本超过两行，移入时tips显示全部内容 {{scope.row.note}} {{scope.row.note}}注意！ 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。 showTips(obj, row){ /*obj为鼠标移入时的事件对象*/ /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/ let TemporaryTag = document.createElement('span'); TemporaryTag.innerText = row.note; TemporaryTag.className = 'getTextWidth'; document.querySelector('body').appendChild(TemporaryTag); let currentWidth = document.querySelector('.getTextWidth').offsetWidth; document.querySelector('.getTextWidth').remove(); /*cellWidth为表格容器的宽度*/ const cellWidth = obj.target.offsetWidth /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/ currentWidth {scope.row.note}} {{scope.row.note}} |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |