element table 动态标题备注超出三行hover显示

最新推荐文章于 2024-07-29 23:44:34 发布

上课都不放假

最新推荐文章于 2024-07-29 23:44:34 发布

阅读量674

点赞数 1

文章标签： javascript 前端 css

原文链接：https://blog.csdn.net/qq_42533735/article/details/107057038

版权

提示：动态表头

一、使用步骤

table：需要匹配一下remark

 		<el-tooltip
                placement="top"
                v-model="scope.row.showTooltip"
                :open-delay="500"
                effect="dark"
                :ref="`tooltip-${scope.row.invoiceId}`"
                :disabled="!scope.row.showTooltip"
              >
                <div slot="content">{{ scope.row.remark }}</div>
                <div @mouseenter="showTips($event, scope.row)" class="myProjectSummary">
                  {{ scope.row.remark }}
                </div>
              </el-tooltip>

js:

 showTips(obj, row) {
      // console.log(row);
      /*obj为鼠标移入时的事件对象*/
      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement("span");
      TemporaryTag.innerText = row.remark;
      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 <= 4 * cellWidth ? (row.showTooltip = false) : (row.showTooltip = true);
      const key = "tooltip-" + row.invoiceId;
      this.$nextTick(() => {
        /* 当表格中有固定列时 一行会出现多个popper 需要隐藏其中一个
        当表头数据是通过循环出来的  需要指定[1]  如果是写死的 去掉[1]即可
        可打印this.$refs[key] 查看结构
        */
        if (this.$refs[key][1].$refs.popper.previousSibling) {
          this.$refs[key][1].$refs.popper.previousSibling.style.display = "none";
        }
        // this.$refs[key].$refs.popper.previousSibling.style.display = 'none'
      });
    },

css:

<style lang="less" scoped>
/deep/.el-tree-node__content {
  height: 50px;
}
.css_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.myProjectSummary {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
<style lang="less">
.el-tooltip__popper {
  max-width: 50%;
}
</style>