element-ui 挖坑之旅

el-tooltip 

• 判断文本超出显示...时，显示tooltip

handleShowTooltip(event) {
    let cell = event.target.querySelector('.el-tooltip')
    this.showTooltip =
    cell.scrollWidth === cell.offsetWidth &&
    cell.scrollHeight === cell.offsetHeight
}


<div  
@mouseenter="handleShowTooltip($event)" 
class="listInfo" 
v-for="(line,index)in item.lines" >          
     <el-tooltip :disabled="showTooltip" effect="dark" popper-class="toolTipClass":content="line.line" placement="top" >
         <div style="white-space:pre" class="content" :class="{blue:line.isApplyLog==1}">{{line.line}}</div>
      </el-tooltip>
</div>

• safari兼容el-tooltip显示

safari自带文本提示，如果我们代码还有用tooltip的话就会出现重复，在此我们需要进行处理

 &::before {
    content: '';
    display: block;
  }

• safari兼容el-table表头和表体错位问题

/* 处理el-table表头和表体错位 */
body .el-table th.gutter {
  display: table-cell !important;
}
table {
  width: 100% !important;
}

• 自定义class

 popper-class="toolTipClass"

• el-table下拉加载数据直接显示本次加载最后一条

.el-table:before{bottom: auto !important}