问题描述

element表格内容过多    
    
    
，鼠标悬浮显示全部内容（show-overflow-tooltip) 


     


     


    ，内容过长显示悬浮抖动

el-table设置show-overflow-tooltip属性后

 




 




 


，数据过多时(超过3000字符)闪烁不显示

在table中设置了show-overflow-tooltip后,当某一列字符内容超长时,鼠标移入会出现闪烁不显示提示

解决方法：

方法一：可以使用el-popover代替tooltip

可以使用el-popover代替tooltip, 且重写el-popover的样式, 保持跟tooltip提示框样式一致：

<el-table-column prop="problemDesc" label="问题描述" min-width="95"> <template slot-scope="scope"> <span v-if="scope.row.problemDesc && scope.row.problemDesc.length > 10"> <el-popover placement="top-start" title="" width="800" trigger="hover" popper-class="workorder-problem-desc"> <div>{{ scope.row.problemDesc }}</div> <span slot="reference"> {{ scope.row.problemDesc.substr(0,10) + ... }} </span> </el-popover> </span> <span v-else>{{ scope.row.problemDesc }}</span> </template> </el-table-column>

【重点】

：修改el-popover样式需要放在不含scoped的style样式中   

   

   

，为了防止污染全局的el-popover样式  

     

     

   ，可以给popper添加类名：

所以修改el-popover样式为：

注意：这个一定要自己写类名


  




  




  

，否则放在不含scoped的style中会污染全局样式 <style> .workorder-problem-desc { background-color: #303133; color: #fff; border-color: #303133; } </style>

效果图：

方法二：使用show-overflow-tooltip超过一定的行数显示...

使用show-overflow-tooltip超过一定的行数  


  


  


，通过样式控制显示...

<el-table-column prop="problemDesc" label="问题描述" min-width="95" show-overflow-tooltip> </el-table-column>

样式：

<style> .el-tooltip__popper { /* max-width:30%; padding-bottom: 5px!important; */ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 12; -webkit-box-orient: vertical; } </style>

其中-webkit-line-clamp是要显示的行数   
     
     
  ，例子显示12行
    
    
    。

效果图：

方法三：使用el-tooltip太长的时候显示滚动条【好用



   




   




   
，推荐】

<el-table-column prop="problemDesc" label="问题描述" min-width="95"> <template slot-scope="scope"> <el-tooltip v-if="scope.row.problemDesc" popper-class="workorder-reason-popper" effect="dark" :content="scope.row.problemDesc" placement="top" :disabled="isShowTooltip"> <div @mouseover="onMouseOver(scope.row.workorderNo)" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> <span :ref="scope.row.workorderNo">{{ scope.row.problemDesc }}</span> </div> </el-tooltip> <span v-else>—</span> </template> </el-table-column> isShowTooltip: false,

获取可视宽度

onMouseOver(str) { // 内容超出 



 



 



，显示文字提示内容 let tag = this.$refs[str]; let parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度 let contentWidth = tag.offsetWidth; // 获取元素可视宽度 this.isShowTooltip = contentWidth <= parentWidth; },

注意样式写在不带scoped的style里面               ，为了避免影响其它样式




    




    




    ，使用了自定义样式popper-class=“workorder-reason-popper
    
    
    ”

<style> .workorder-reason-popper { max-height: 300px; overflow: auto; } .workorder-reason-popper .popper__arrow { display: none; } </style>

效果图














，带滚动条的鼠标hover显示全部：