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

在Element UI的Tree组件中，可以通过node-mouse-over事件来实现鼠标滑过节点时的回调。你可以在这个回调中显示你想要的标签信息。以下是一个简单的实现示例：

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    @node-mouse-over="handleNodeMouseOver"
    @node-mouse-leave="handleNodeMouseLeave"
  >
  </el-tree>
  <div id="tooltip">{{ tooltipText }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [/* 你的树形数据 */],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tooltipText: ''
    };
  },
  methods: {
    handleNodeMouseOver(event, data) {
      this.tooltipText = `节点名称: ${data.label}`; // 根据需要显示更多信息
      this.showTooltip(event);
    },
    handleNodeMouseLeave() {
      this.tooltipText = '';
    },
    showTooltip(event) {
      const tooltip = document.getElementById('tooltip');
      tooltip.style.top = `${event.clientY}px`;
      tooltip.style.left = `${event.clientX}px`;
      tooltip.style.display = 'block';
    }
  }
};
</script>
 
<style>
#tooltip {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  z-index: 1000;
}
</style>

在这个示例中，我们定义了两个方法handleNodeMouseOver和handleNodeMouseLeave来处理鼠标滑入和滑出节点的事件。当鼠标滑过节点时，handleNodeMouseOver会更新一个名为tooltipText的数据属性，这个属性绑定在一个简单的工具提示元素上，用于显示信息。showTooltip函数计算工具提示的位置并显示它。当鼠标离开节点时，handleNodeMouseLeave将清空工具提示信息。