element-ui el-tree 文本超出显示省略号添加移入提示

最新推荐文章于 2024-06-05 16:19:10 发布

Gabriel.c

最新推荐文章于 2024-06-05 16:19:10 发布

阅读量1k

点赞数 5

文章标签： ui vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_49046027/article/details/134398437

版权

具体代码

 <el-tree
    :data="deptOptions"
    :props="defaultProps"
    :expand-on-click-node="false"
    :filter-node-method="filterNode"
    :default-expanded-keys="defaultExpandedKeys"
    ref="tree"
    :default-expand-all="isExpandAll"
    :highlight-current="true"
    @node-click="handleNodeClick"
    node-key="id"
  >
    <el-tooltip
      :disabled="showTitle"
      effect="dark"
      :content="tooltipTitle"
      placement="top"
      slot-scope="{ node, data }"
    >
      <span
        class="span-ellipsis"
        @mouseover="onShowNameTipsMouseenter"
        >{{ node.label }}</span
      >
    </el-tooltip>
  </el-tree>
data(){
	return{
	  tooltipTitle: "",
      showTitle: true,
	}
},
methods:{
onShowNameTipsMouseenter(e) {
      var target = e.target;
      let textLength = target.clientWidth;
      let containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        this.tooltipTitle = e.target.innerText;
        this.showTitle = false;
      } else {
        this.showTitle = true;
      }
    }
}
<style>
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}
</style>

详解：

 <el-tree
    :data="deptOptions"
    :props="defaultProps"
    :expand-on-click-node="false"
    :filter-node-method="filterNode"
    :default-expanded-keys="defaultExpandedKeys"
    ref="tree"
    :default-expand-all="isExpandAll"
    :highlight-current="true"
    @node-click="handleNodeClick"
    node-key="id"
  >
    <el-tooltip
      :disabled="showTitle"    //判断是否显示tooltip
      effect="dark"
      :content="tooltipTitle"   //移入提示内容
      placement="top"
      slot-scope="{ node, data }"
    >
      <span
        class="span-ellipsis"     //设置超出样式、添加省略号
        @mouseover="onShowNameTipsMouseenter"    //移入方法 判断当前文本是否超出
        >{{ node.label }}</span
      >
    </el-tooltip>
  </el-tree>
data(){
	return{
	  tooltipTitle: "",
      showTitle: true,
	}
},
methods:{
onShowNameTipsMouseenter(e) {
      var target = e.target;
      let textLength = target.clientWidth;
      let containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        this.tooltipTitle = e.target.innerText;
        this.showTitle = false;
      } else {
        this.showTitle = true;
      }
    }
}
<style>
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}
</style>