vue+elementui 实现溢出出现省略号,划入显示全部内容

最新推荐文章于 2024-10-14 12:56:59 发布

月亮上的垂耳朵

最新推荐文章于 2024-10-14 12:56:59 发布

阅读量306

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_43462325/article/details/142051098

版权

效果图
在这里插入图片描述

<el-descriptions-item label="巡检事项">
  <el-tooltip :disabled="tooltipShow" placement="top">
     <div slot="content" style="width: 350px">
        {{ currentInfo.inspectionInfo.inspectionItem }}
      </div>
      <span
        @mouseenter="mouseEnter"
        @mouseleave="mouseLeave"
        style="
          overflow: hidden;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
        "
      >{{ currentInfo.inspectionInfo.inspectionItem }}</span>
   </el-tooltip>
</el-descriptions-item>
mouseEnter(event) {
   const offsetWidthData = event.target?.offsetWidth;
   const scrollWidthData = event.target?.scrollWidth;
   if (scrollWidthData > offsetWidthData) {
     this.tooltipShow = false;
   }
 },
mouseLeave() {
  this.tooltipShow = true;
},
``