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>