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>

 

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