ElementUI tree超出显示省略号

最近做项目的时候,遇到两个问题

问题:

1. 使用elementUITree时,如果有字段超出,并且后面带有图标的时候,即使使用了cacl动态计算宽度,超出的宽度还是会比其他的多处2px,造成页面无法对其的情况
2. 如果字段超出,则隐藏起来,展示省略号,但是如果有省略了,字段就无法展示全了,鼠标悬浮应该展示

最终效果图

解决方法:

1. 将树的图标用div包起来,属性设置为position: absolute; right: 0px;,
2. 超出展示省略号,鼠标悬浮会展示提示框
   2.1先设置一个宽度,超出展示省略号,
   2.2使用ElementUI中的el-tooltip属性,让其悬浮展示el-tooltip
   2.3 设置鼠标悬浮事件,判断event的现在展示的宽度和原本的宽度, 如果相等: 则表示能全部展示,就设置不展示悬浮框 如果不相等: 则表示有超出的部分,超出就会展示省略号,所有这个时候我们让他展示悬浮框

代码如下

<template lang="">
  <div>
    <div style="width: 150px;border: 1px solid red">
      <el-tree
        ref="tree"
        :data="treeData"
        :props="defaultProps"
        :expand-on-click-node="false"
        default-expand-all
        @node-click="handleNodeClick"
      >
        <div slot-scope="{ node, data, el }" class="tree-node">
          <el-tooltip
            :content="node.label"
            :disabled="isShowTooltip"
            :open-delay="300"
            placement="top"
            effect="dark"
          >
            <span class=