element-tree鼠标移入显示操作鼠标移出隐藏操作

在使用 element-tree 时，我们可以通过以下方式实现鼠标移入和移出的效果。在组件的模板中，为树节点添加 @mouseover 和 @mouseleave 事件处理函数，如 @mouseover="mouseover(node, data)" @mouseleave="mouseleave(node, data)"。在方法中，通过 $set 方法设置节点数据的 show 属性，从而控制操作按钮的显示与隐藏。

需要注意的是，具体的实现细节可能因项目需求而有所不同。

<div class="left-body">
      <el-tree
        :data="data"
        node-key="id"
        accordion
        :expand-on-click-node="false">
      <div class="custom-tree-node" slot-scope="{ node, data }" @mouseover="mouseover(node, data)" @mouseleave="mouseleave(node, data)">
        <div>{{ node.label }}</div>
        <div v-show="data.show">
          <el-button
            v-if="buttonVisible"
            type="text"
            :size="size"
            @click="() => append(data)">
            修改
          </el-button>
          <el-button
            v-if="buttonVisible"
            type="text"
            :size="size"
            @click="() => remove(node, data)">
            删除
          </el-button>
          <el-button
            v-if="buttonVisible"
            type="text"
            :size="size"
            @click="() => remove(node, data)">
            设置变量
          </el-button>
        </div>
      </div>
      </el-tree>
    </div>

methods: {
    // 树节点鼠标移入移出
    mouseover(node, data) {
      this.$set(data, 'show', true)
    },
    // 树节点鼠标移入
    mouseleave(node, data) {
      this.$set(data, 'show', false)
    },
  }