el-table中使用show-overflow-tooltip属性内容过长被隐藏时显示 tooltip,使用了作用域插槽的模板那么show-overflow-tooltip设置的显示tooltip内容只作用到下一级的div内容
使用<template slot-scope="scope">后 需要在 将内容显示tooltip上的标签设置overflow:hidden;text-overflow:ellipsis;做内容标签上设置这些样式之后 谷歌上显示是正常的但是火狐上显示会出问题 无法显示出tooltip查看渲染后的属性发现 内容显示层都被设定了display: block; 将其改为display: inline;火狐可以正常显示tooltip
<el-table-column
prop="name"
show-overflow-tooltip
label="姓名">
<template slot-scope="scope">
<span v-if="scope.row.name == 'stringLong'">
<p v-text="scope.row.name" class="pTextOver"></p>
</span>
</template>
</el-table-column>
<style>
.pTextOver{
display: inline;
overflow: hidden;
text-overflow: ellipsis;
}
</style>