针对table中设置超过两行显示省略号，显示tooltip时，tabel的属性showtooltip失效问题，做出调整

展示tooltip
//在调用的地方引入此方法即可(引入的要点已注释)
// 注：如果接口返回的是码表可传入list(码表)
//此方法中list格式必须为list:[{value:"1",label:"内容"}]
//obj为鼠标移入时的事件对象
//row为当前行
//key为当前单元格的对应字段名
//currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后移除
//重点：经实验发现对比长度不太精确，所以需要给temporary添加和表格内容相同大小的font-size

showTips(obj, row, key, list) {
      let content = "";
      if (list) {
        let currentItem = list.filter((item) => {
          return item.value == row[key];
        });

        if (currentItem) {
          content = currentItem[0].label;
        } else {
          content = "";
        }
      } else {
        content = row[key];
      }

      let TemporaryTag = document.createElement("span");
      TemporaryTag.style.fontSize = "14px";
      TemporaryTag.innerText = content;
      TemporaryTag.className = "getTextWidth";
      document.querySelector("body").appendChild(TemporaryTag);
      let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
      document.querySelector(".getTextWidth").remove();

      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth;
      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
      if (currentWidth < 2 * cellWidth) {
        this.$set(row, "show" + key + "Tooltip", false);
      } else {
        this.$set(row, "show" + key + "Tooltip", true);
      }
    },

<el-table-column prop="templateName" label="模板名称" width="180">
        <template slot-scope="scope">
          <Tooltip
            transfer
            placement="bottom-start"
            :delay="50"
            max-width="400"
            :disabled="!scope.row['showtemplateNameTooltip']"
            transfer-class-name="bd"
          >
          <!-- 只需要保证!scope.row[]中的show...Tooltip中间的...与当前行的prop相同即可 -->
            <span
              @mouseenter="showTips($event, scope.row, 'templateName')"
              class="showToolTips"
              style="
                -webkit-user-select: text;
                -moz-user-select: text;
                -ms-user-select: text;
                user-select: text;
              "
              >{{ scope.row.templateName }}</span
            >
            <div
              slot="content"
              style="
                whitespace: normal;
                max-width: 400px;
                word-break: break-all;
              "
            >
              {{ scope.row.templateName }}
            </div>
          </Tooltip>
        </template>
      </el-table-column>

持续更新...\

今天同事在做笔记时发现的问题，如果将保存文字的span放到body下时，会受到body宽度的影响，因此在上面获取span宽度前应加上一行代码设置span不换行

TemporaryTag.style.whiteSpace = "noWrap";

增加表格中的文字样式

<style lang="scss" scoped>
  .showToolTips {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }
</style>