【vue+element ：el-tooltip 文本超出时，文字提示，否则隐藏】

最新推荐文章于 2025-02-28 00:15:00 发布

借鉴收藏家

最新推荐文章于 2025-02-28 00:15:00 发布

阅读量3.7k

点赞数 3

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/weixin_46536395/article/details/122218583

版权

vue+element ：el-tooltip 文本超出时，文字提示，否则隐藏

在这里插入图片描述

1、vue模板代码部分

<el-tooltip
            :content="str"
            :disabled="isShowTooltip"
            :hidden="hidden"
            effect="dark"
            placement="top-end"
          >
            <div
              @mouseover="onMouseOver(str)"//鼠标移入事件
              style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;"
            >
              <span :ref="str">{{ `${str}`}}</span>
            </div>
          </el-tooltip>

2、数据声明代码部分

data () {
    return {
      isShowTooltip: false,
      remark: '' }
      }

实现方法部分

methods: {
    onMouseOver (str) { // 内容超出，显示文字提示内容
      const tag = this.$refs[str]
      const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
      const contentWidth = tag.offsetWidth // 获取元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth

    }
    }

4、补充部分
如果用到的是el-table组件，可以加show-overflow-tooltip属性，具体可以看element ui官网！
在这里插入图片描述