苦海学说

Personal Blog
Exchange Learning

element的el-table组件设置show-overflow-tooltip在IE或者火狐存在无法显示提示

复现步骤:

1、给单元格添加 show-overflow-tooltip 属性
2、当单元格的字段长度超过宽度,单元格出现省略号;
3、被隐藏的字段为一个或者两个中文字符;
4、在 火狐浏览器 和 IE 中无法正常显示 tooltip(谷歌浏览器能正常显示)

问题:

当隐藏的字段为两个字符长度时,hover 无法显示 tooltip

解决方案:

自己写个指令吧,参考:https://www.jianshu.com/p/9ad876e2daa3
但是需要改造下,textSpan.offsetWidth >= el.offsetWidth,加上=,然后把鼠标移入移出事件处理移出来,这段判断放到鼠标移入事件中

/* 鼠标移入悬浮气泡提示 */
Vue.directive("tip", {
  inserted(el, binding) {
    let $div;
    el.addEventListener("mouseover", e => {
      const curStyle = window.getComputedStyle(el, ""); // 获取当前元素的style
      const textSpan = document.createElement("span"); // 创建一个容器来记录文字的width
      // 设置新容器的字体样式,确保与当前需要隐藏的样式相同
      textSpan.style.fontSize = curStyle.fontSize;
      textSpan.style.fontWeight = curStyle.fontWeight;
      textSpan.style.fontFamily = curStyle.fontFamily;
      // 将容器插入body,如果不插入,offsetWidth为0
      document.body.appendChild(textSpan);
      // 设置新容器的文字
      textSpan.innerHTML = el.innerText;
      let flag = textSpan.offsetWidth >= el.offsetWidth;
      if (binding.modifiers.same) {
        flag = textSpan.offsetWidth > el.offsetWidth;
      }
      if (flag) {
        let text = e.target.getAttribute("data-txt") || el.innerText,
          top = e.clientY - e.offsetY,
          left = e.clientX - e.offsetX + e.target.clientWidth / 2;
        $div = document.createElement("div");
        $div.setAttribute("class", "cc-tips");
        $div.setAttribute("style", "top:" + top + "px;left:" + left + "px");
        $div.innerHTML = text;
        document.body.appendChild($div);
      }
      // 移除刚刚创建的记录文字的容器
      document.body.removeChild(textSpan);
    });
    el.addEventListener("mouseout", () => {
      if ($div) {
        try {
          document.body.removeChild($div);
        } catch {
          new Error();
        }
      }
    });
  }
});

本原创文章未经允许不得转载 | 当前页面:苦海学说 » element的el-table组件设置show-overflow-tooltip在IE或者火狐存在无法显示提示

评论