element-UI table文字超出两行，隐藏多余文字，移入显示tips

css样式

//写在scoped里面所以需要deep,app-container为el-table外部包裹div的classname
.app-container /deep/.el-table .myNoteBox .cell {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

html代码

<el-table-column label="描述" align="center" class-name="myNoteBox">
   <template slot-scope="scope">
         <!-- tips悬浮提示 -->
         <el-tooltip
            placement="top"
            v-model="scope.row.showTooltip"
            :open-delay="500"
            effect="dark"
            :disabled="!scope.row.showTooltip"
         >
            <div slot="content">{{ scope.row.hiddenDescribe }}</div>
            <div
              @mouseenter="
                showTips($event, scope.row, scope.row.hiddenDescribe)
              "
            >
              {{ scope.row.hiddenDescribe }}
            </div>
         </el-tooltip>
     </template>
  </el-table-column>

JS代码

  showTips(obj, row, text) {
      /*obj为鼠标移入时的事件对象*/

      /*width为文本在页面中所占的宽度，创建标签，加入到页面，获取width,最后在移除*/
      let TemporaryTag = document.createElement("span");
      TemporaryTag.innerText = text;
      TemporaryTag.className = "getTextWidth";
      document.querySelector("body").appendChild(TemporaryTag);
      let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
      document.querySelector(".getTextWidth").remove();

      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth;

      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
      currentWidth <= 2 * cellWidth
        ? (row.showTooltip = false)
        : (row.showTooltip = true);
    },

参考文章：https://blog.csdn.net/qq_42533735/article/details/107057038