大家都知道elementUI中的el-table的单元格,如果内容比较多一行显示不了,只能一行显示,多余的内容‘...’,鼠标放上去显示所有内容,需要在el-table-column添加show-overflow-tooltip属性,官方文档只有这种写法,比较局限。这时需要我们改造来满足我们的需求。
以单元格显示两行为例子:
1、html
<el-table-column
label="介绍内容"
align="center"
min-width="160">
<template slot-scope="scope">
<!-- show-overflow-tooltip改造悬浮提示 -->
<el-tooltip
placement="top"
:open-delay="300"
effect="dark"
:content="scope.row.introContent"
:disabled="!scope.row.showTooltip">
<div @mouseenter="showTips($event,scope.row,scope.row.introContent)" class='myNote'>{
{scope.row.introContent}}</div>
</el-tooltip>
</template>
</el-table-column>