本段为html代码示例
<el-tooltip
placement="top"
:open-delay="500"
effect="dark"
:disabled="!disabled"
>
<div slot="content">{
{ scope.row.title }}</div>
<div class="title-view myNote" @mouseenter="showTips($event,scope.row)" >{
{ scope.row.title }}</div>
</el-tooltip>
方法示例
showTips(obj, row) {
/*obj为鼠标移入时的事件对象*/
/*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
const TemporaryTag = document.createElement('span')
TemporaryTag.innerText = row.title
TemporaryTag.className = 'getTextWidth'
document.querySelector('body').appendChild(TemporaryTag)
document.querySelector('.getTextWidth').style
根据elementUI匹配table字段最高两行,字数超出两行后显示...
最新推荐文章于 2024-06-28 15:24:06 发布
本文介绍了如何利用Element UI和CSS3实现表格中文字内容超过两行后自动省略,展示关键信息,提高页面布局的整洁性和用户体验。
摘要由CSDN通过智能技术生成