el-table使用模板插槽無法顯示tooltip 以及 text-overflow:ellipsis 在火狐顯示的問題

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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章