el-tree 悬浮展示按钮

`el-tree` 是 Element UI 提供的一个用于构建树形结构组件，它通常用于数据的分类和层级展示。如果你想在 `el-tree` 中添加一个悬浮展示按钮的功能，通常是通过自定义节点的渲染方式来实现的。

当你点击某个节点时，按钮会显示在节点下方，并且当鼠标移开时按钮会消失，这种效果叫做“悬浮展示”。你可以通过覆盖默认的节点模板 (`default-node-key` 或者 `render-content` 配置项) 来添加这个按钮，然后在事件处理器（如 `node-click` 或者 `node-contextmenu`）中控制按钮的显示和隐藏。

例如，你可以这样做：

<template>
  <el-tree
    :data="treeData"
    :default-expand-all="true"
    :node-key="id"
    :render-content="renderTreeNode"
    ref="treeRef"
  ></el-tree>

  <div class="floating-btn" v-if="showFloatingBtn">
    <button @click="toggleFloatingBtn">悬停查看</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData,
      showFloatingBtn: false,
    };
  },
  methods: {
    renderTreeNode(node, $data) {
      // 在这里添加按钮
      const nodeContent = ...; // 根据需要生成节点内容

      if (node.children.length > 0) {
        return (
          <span class="parent-node">
            {nodeContent}
            <button v-show="showFloatingBtn && isParentNodeHovered(node)" @click="toggleFloatingBtn">更多</button>
          </span>
        );
      } else {
        return nodeContent;
      }
    },
    toggleFloatingBtn() {
      this.showFloatingBtn = !this.showFloatingBtn;
      // 如果需要，可以根据节点位置判断是否悬停
      this.$refs.treeRef.$el.querySelector('.parent-node').classList.toggle('hovered');
    },
    isParentNodeHovered(node) {
      // 判断当前节点是否处于鼠标悬停状态，可以使用元素的offsetTop、clientHeight等属性
      const nodeElement = this.$refs.treeRef.getNode(node);
      return nodeElement.offsetTop + nodeElement.clientHeight >= event.clientY;
    },
  },
};
</script>

在这个例子中，`isParentNodeHovered` 函数可以根据鼠标事件计算节点是否被悬停，`toggleFloatingBtn` 控制按钮的显示和隐藏。记得根据实际需求调整样式(`.floating-btn`, `.parent-node`, `.hovered`)。