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="over-ellipsis" @mouseover="mouseOver($event)">
              {{ node.label }}
            </span>
          </el-tooltip>
          <span class="top-right">
            <i
              class="el-icon-circle-plus"
              @click.stop.prevent="() => addFun(data)"
            />
            <i
              class="el-icon-delete"
              @click.stop.prevent="() => deleteFun(data)"
            />
          </span>
        </div>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowTooltip: false,
      treeData: [
        {
          label: "一级 JOJO奇妙冒险",
          children: [
            {
              label: "二级 JOJO黄金之风",
              children: [
                {
                  label: "三级 JOJO之茸茸"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    // 超出显示
    mouseOver(event) {
      console.log(event);
      this.isShowTooltip =
        event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;
      console.log("222");
    },
    handleNodeClick(data) {
      console.log(data);
    },
    addFun(data) {
      console.log(data);
    },
    deleteFun(data) {
      console.log(data);
    }
  }
};
</script>
<style scoped>
.tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-right: 8px; */
}
.over-ellipsis {
  display: block;
  width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.top-right {
  display: block;
  min-width: 50px;
  width: 50px;
  text-align: right;
  position: absolute;
  right: 0px;
}
</style>