element-UI table单元格的内容太长，隐藏文字，鼠标滑过弹框显示

article/2025/11/6 3:36:04

element-UI table单元格的内容太长，隐藏文字，鼠标滑过弹框显示

参考：https://blog.csdn.net/qq_42533735/article/details/107057038?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare

测试数据

//测试数据
tableData: [{id:1,remark:'111111111111111222222222222222222222222222222222222222222223333333333333333333333333'},{id:2,remark:'11111111111113333'}
]

方法一：Table-column Attributes 的属性show-overflow-tooltip，显示效果在一行

<el-table-column prop="remark" align="center" label="备注" show-overflow-tooltip></el-table-column>

效果

方法二：使用上面哥们的办法，用tooltip文字提示

......省略部分代码 <el-table>啥的
<el-table-column prop="remark" align="center" label="备注"><template slot-scope="scope"><el-tooltipplacement="top"v-model="scope.row.showTooltip":open-delay="500"effect="dark":disabled="!scope.row.showTooltip"><div slot="content">{{scope.row.remark}}</div><div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.remark}}</div></el-tooltip></template>
</el-table-column>

showTips(obj, row){/*obj为鼠标移入时的事件对象*//*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/let TemporaryTag = document.createElement('span');TemporaryTag.innerText = row.remark;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 <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
}

显示效果：弹框还是一行

方法三：

使用popover弹出框，可以控制弹框的宽度

......省略部分代码 <el-table>啥的
<el-table-column prop="remark" align="center" label="备注"><template slot-scope="scope"><el-popoverwidth="200"trigger="hover"placement="top"v-model="scope.row.showTooltip":open-delay="500":disabled="!scope.row.showTooltip"><div>{{scope.row.remark}}</div><div slot="reference" @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.remark}}</div></el-popover></template>
</el-table-column>//showTips同方法二

显示效果：