实现elementui-tree组件鼠标滑过显示标签信息

项目中产品提了一个这样的需求（鼠标悬浮标签之上展示标签信息），老大一直问能不能实现？其实很简单！他不确定的点是在他写的位置不对，还有取的定位值不对，因为如果是说单纯从树节点自定义滑入滑出显示定位标签的话当列表内容过多出现滚动条的时候会导致标签内容被遮住！那这个时候我们就可以考虑除了子元素相对定位之外还有什么方法可以获取到当前位置进行内容跟随显示，那就是我们的鼠标位置信息。可以通过获取鼠标位置信息，设置标签信息模块在外层，通过获取鼠标距离X轴Y轴的位置进行固定定位！一下代码实现

<template>
    <div class="a">
        <el-tree
            :default-expand-all="activeName == 1"
            ref="tree"
            show-checkbox
            :data="data"
            node-key="id"
            :default-checked-keys="defaultCheckIds"
            :filter-node-method="filterNode"
            @check-change="handleCheckChange">
            <span slot-scope="{node,data}" class="custom-tree-node"
            @mouseenter="event => mousenter(event,data)"
            @mouseleave="event => mouseleave(event,data)"></span>
            <span class="treeNodeStyle">{{node.label}}</span>
        </el-tree>

    <!--要显示的标签信息-->
        <div
      v-if="show"
      class="suspension"
      :style="{ top: y + 'px', left: x + 'px' }">
      <div>
        <span>标签名称：&lt;/span&gt;&lt;span&gt;{{ tagInfo.label }}</span>
      </div>
      <div>
        <span>最新数据时间：</span><span>{{ tagInfo.latestDataTime }}</span>
      </div>
      <div>
        <span>刷新周期：</span><span>{{
          tagInfo.refreshCycle === 1
            ? "日"
            : tagInfo.refreshCycle === 2
            ? "周"
            : tagInfo.refreshCycle === 3
            ? "月"
            : ""
        }}</span>
      </div>
      <div>
        <span>业务口径：</span><span》{{ tagInfo.businessCaliber }}</span>
      </div>
    </div>
    </div>

</template>
export default {
  data() {
    return {
      show: false,
      x: "", //跟随鼠标光标x轴位置
      y: "", //跟随鼠标光标Y轴位置
      tegInfo: {}
    };
  },
  methods: {
    // 树节点鼠标移入
    mouseenter(event, data) {
      if (data.tagExplain === 1) {
        this.show = true;
        this.tagInfo = data;
        //获取鼠标光标位置
        let e = event || window.event;
        let scrollX =
          document.documentElement.scrollLeft || document.body.scrollLeft;
        let scrollY =
          document.documentElement.scrollTop || document.body.scrollTop;
        this.x = e.pageX || clientX + scrollX;
        this.y = e.pageY || clientY + scrollY;
      }else{
        return;
      }
    },
    // 树节点鼠标移出
    mouseleave(node, data) {
      this.show = false;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.handleCheckChange();
    });
  }
};
</script>

<style lang="scss" scoped>
.suspension {
  position: fixed;
  z-index: 99;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.3);
}
</style>