el-table 列的字段内容太多show-overflow-tooltip 不显示，数据列闪烁抖动

• 问题描述：el-table表格内容过多，预期：鼠标悬浮显示全部内容，实际：内容过长（超1000字符）默认的tootip 在鼠标悬浮的时候数据列表抖动。

解决方法

• 使用el-popover 代替 show-overflow-tooltip

1. vue代码

<el-table-column
    prop="demoField"
    label="ID"
    align="center"
    width="300px"
>
    <template slot-scope="scope">
    <div>
           <span
               v-if="scope.row.taskCommon === '' || scope.row.taskCommon === undefined"
               style="display: flex; justify-content: center;"
           >
               -
           </span>
           <el-popover
               v-else
         	   placement="bottom"
         	   trigger="hover"
       	   >
            <template>
                <div class="custome-popover">{{ scope.row.demoField }}</div>
            </template>
            <div slot="reference" class="custome-content">
                <span>{{ scope.row.demoField }}</span>
            </div>
        </el-popover>
    </div>
    </template>
</el-table-column>

2. 样式

.custom-popover {
      width:600px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      /**显示行数 **/
      -webkit-line-clamp: 100;
      -webkit-box-orient: vertical;
}
.custome-content {
      cursor: default;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
}