el-table 内容太多 show-overflow-tooltip 显示不下，闪烁抖动不显示

本文介绍: 方法一： el–popover 代替 show–overflow–tooltip。el–popover 样式需要放在不含scoped的style 样式中，为了防止污染全局 el–popover 样式，要给el–p op per 添加类名：p op per–class=”XXX” 方法二：使用 show–overflow–tooltip超过一定的行数显示。

问题描述(show–overflow–tooltip)
1. element 表格内容过多，鼠标悬浮显示全部内容，内容过长显示悬浮抖动
2. show–overflow–tooltip 数据过多时(超过3000字符)闪烁不显示
3. 当某一列字符内容超长时,鼠标移入会出现闪烁不显示提示
————————————————

方法一： el–popover 代替 show–overflow–tooltip

&lt;el-table-column label="备注" align="center" min-width="200px" prop="remark"&gt;
   <template slot-scope="scope"&gt;
      <span v-if="scope.row.remark &amp;&amp; scope.row.remark.length &gt; 10">
         <el-popover
            placement="top-start"
            title=""
            trigger="hover"
            popper-class="workorder-remark"
         >
            <div>{{ scope.row.remark }}</div>
            <span slot="reference">
              {{ scope.row.remark.substr(0,10) + '...' }}
            </span>
         </el-popover>
       </span>
     <span v-else>{{ scope.row.remark }}</span>
   </template>
</el-table-column>

<style>
  .workorder-remark {
    background-color: #000;
    color: #ffffff;
    border-color: #000;
    max-width: 50%;
    // 想要显示全部，下面就不用写了
    padding-bottom: 4px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;
  }
</style>

重写el-p op over的样式, 保持跟tooltip 提示框样式一致，el-p op over 宽度可以使用 max–width 显示, 超出行省略，同时限制的宽度时，设置多少行的限制，否则当内容几千以上就易有bug；为了调整正好15行省略时的样式看起来不会出问题,可以调padding,line–height,font–size保证展示框样式完整。

el-p op over样式需要放在不含scoped的style样式中，为了防止污染全局el-pop over样式，要给el-pop per 添加类名：popper–class=”XXX”

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

css 方法同上述方法一差不多，样式一般是全局的，不能加scoped

<el-table-column
    label="备注"
    align="center"
    min-width="200px"
    prop="remark"
    show-overflow-tooltip
/>

<style>
    .el-tooltip__popper {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 15;
      -webkit-box-orient: vertical;
    }
</style>