el-table分页后el-tooltip效果失效
业务
el-table上鼠标滑过企业默认el-tooltip效果展示
问题原因
如果tooltip中内嵌有多层内容并且添加了 v-if 的条件判断,也需给 tooltip 添加相同的 v-if 条件,否则会导致出现的bug就是:el-tooltip效果未生效。
代码图片
代码
<el-table-column width="" show-overflow-tooltip label="所在企业">
<template v-slot="{row}">
<el-tooltip v-if="row.deptList.length" placement="top">
<div slot="content" v-for="item in row.deptList" :key="item.id"><span style="line-height: 20px">{{
item.deptName
}}</span></div>
<div v-if="row.deptList.length"><span>{{
row.deptList[0].deptName
}} [{{ row.deptList.length }}]</span></div>
</el-tooltip>
</template>
</el-table-column>