element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)
作者：Fighting_p
本文主要介绍了element el-tooltip动态显示隐藏,主要实现有省略号显示,没有省略号不显示,具有一定的参考价值,感兴趣的可以了解一下
遇到需要在table的单元格内展示多行信息的需求，此时table组件中的show-overflow-tooltip属性会将多行信息全部提示出来
<el-row v-loading="loading" :gutter="30" class="warning-wrapper">
<el-col
v-for="(risk, index) in tableData"
:key="index + '' + risk.zrr"
:lg="8"
:md="8"
:sm="12"
:xl="8"
:xs="12"
class="warning-item"
>
<el-card class="warning-card">
<div>
<el-popover :offset="-100" placement="bottom-start" trigger="click" width="380">
<!-- ... -->
<div slot="reference" class="header-text">
<el-tooltip
effect="dark"
:content="risk.zrrView"
placement="top-start"
:disabled="tooltipIsShow"
>
<span
:class="['name', `zrrView${index}`]"
@mouseenter="tooltipIsDisHandler(`.zrrView${index}`)"
>
{{ risk.zrrView }}
</span>
</el-tooltip>
<el-tooltip
effect="dark"
:content="risk.zrrView !== risk.ssbmView ? risk.ssbmView : ''"
placement="top-start"
:disabled="tooltipIsShow"
>
<span
v-if="risk.zrrView !== risk.ssbmView"
:class="['site', `ssbmView${index}`]"
@mouseenter="tooltipIsDisHandler(`.ssbmView${index}`)"
>
{{ risk.ssbmView }}
</span>
</el-tooltip>
<!-- ... -->
</div>
</el-popover>
<div class="warning-people" @click="openDetail(risk)">
<div class="article-points">
<el-tooltip
class="item"
effect="dark"
:content="risk.mxmc"
placement="top-start"
:disabled="tooltipIsShow"
>
<div
:class="[`mxmc${index}`]"
@mouseenter="tooltipIsDisHandler(`.mxmc${index}`)"
>
XXXX: {{ risk.mxmc }}
</div>
</el-tooltip>
<div>XXXX: {{ risk.cjsj }}</div>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>data() {
return {
// ...
tooltipIsShow: false // 是否展示tooltip
}
},
tooltipIsDisHandler(className) {
this.$nextTick(() => {
const dom = document.querySelector(className)
const domScrollWidth = dom && dom.scrollWidth
const domClientWidth = dom && dom.clientWidth
this.tooltipIsShow = domClientWidth >= domScrollWidth
})
}最开始想的解决办法 （实现不了，因为在 this.$nextTick() 中计算的结果在 tooltipIsDisHandler 中无法直接 return）
到此这篇关于element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)的文章就介绍到这了,更多相关el-tooltip动态显示隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！