{{scope.row.remark}}
showTips(obj, row){
row.showTooltip = this.getTooltipShowFlag(obj, row.remark);
},
// 计算是否需要显示tooltip
getTooltipShowFlag: (obj, content) => {
/* obj为鼠标移入时的事件对象 */
/* currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后再移除 */
let tempTag = document.createElement('span');
tempTag.innerText = content; // 显示文本内容
tempTag.className = 'getTextWidth';
tempTag.style.fontSize = window.getComputedStyle(obj.target)['font-size']; // '14px'获取字体
document.querySelector('body').appendChild(tempTag);
let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
/* cellWidth为表格容器的宽度 */
const cellWidth = obj.target.offsetWidth;
/* 当文本宽度小于且等于容器宽度时,不显示tip,反之显示tip, 代表文本超过显示 */
// row.showTooltip = currentWidth <= cellWidth ? false : true;
console.log('打印', currentWidth, cellWidth);
return currentWidth <= cellWidth ? false : true;
},
.reasonCol {
.myNote {
cursor: default;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
代码中计算了一下是否需要显示tooltip,这个有兴趣的朋友可以看看
我这个做法实现的效果其实和ElementUI中实现应该是类似的,只是我只针对这一列设置一个很大的max-width,不是全局对tooltip的max-width进行设置,当然最干脆的就是设置全局max-width,那我这些折腾就没啥意义了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)