列表组件超出两行显示tooltip,超出文本以...显示

750 阅读1分钟

针对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>

    .showToolTips {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
    }