elementui-树形控件实现子节点右侧添加图标和数据，鼠标放上去显示文字

在Element UI的树形控件中，可以通过render-content属性来自定义树节点的内容，包括是否显示图标以及当鼠标悬停时显示的文字。以下是一个简单的示例，展示如何实现这一功能：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    :props="defaultProps"
    :render-content="renderContent"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        // ... 树形结构的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    renderContent(h, { node, data }) {
      return (
        <span>
          {node.label}
          <span style="margin-left: 10px;">{this.getIcon(node)}</span>
          <span style="margin-left: 10px; display: none;" class="node-tooltip">{this.getTooltip(node)}</span>
        </span>
      );
    },
    getIcon(node) {
      // 返回你想要的图标，例如 Font Awesome 图标
      return '<i class="fa fa-plus"></i>';
    },
    getTooltip(node) {
      // 返回鼠标悬停时显示的文字
      return '自定义文字';
    }
  },
  mounted() {
    // 添加鼠标悬停显示文字的事件监听
    const self = this;
    document.addEventListener('mouseover', function(e) {
      const target = e.target;
      if (target.classList.contains('el-tree-node__content') && target.querySelector('.node-tooltip')) {
        const tooltip = target.querySelector('.node-tooltip');
        tooltip.style.display = 'inline-block';
      } else {
        const tooltips = document.querySelectorAll('.node-tooltip');
        tooltips.forEach(tooltip => tooltip.style.display = 'none');
      }
    });
  }
};
</script>
 
<style>
/* 添加自定义样式 */
.node-tooltip {
  /* 样式根据需要自定义 */
  font-size: 12px;
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 5px;
  position: absolute;
  z-index: 100;
  display: none;
}
</style>

在这个示例中，renderContent方法返回了一个Vue的渲染函数，它定义了树节点的内容。我们使用了<span>标签来组织文本，并通过条件渲染了图标和工具提示文本。鼠标悬停时，我们通过添加事件监听在合适的时机显示或隐藏工具提示文本。

请注意，这个示例假设你已经有了Element UI的相关依赖，并且你的项目中已经配置了Vue的渲染环境。如果你的项目中使用的是Element UI的版本不支持render-content属性，你可能需要使用其他方法来实现自定义渲染，例如使用scoped slot。