el-tree 实现鼠标移入节点，显示功能按钮

实现的功能

1.鼠标移动到节点上显示功能图标，鼠标移除隐藏
2.点击功能图标显示功能下拉菜单，使用el-dropdown插件
3.不需要设置el-tree属性expand-on-click-node为false，将节点事件和下拉框事件区分开
4.移入到节点DOM上就显示功能图标，而不是移动到文本DOM才显示（这个功能纠结和好久）

上代码

<template>
  <el-tree :data="data" node-key="label">
    <span class="custom-tree-node" slot-scope="{ node, data }" @mouseover="mouseover(data)" @mouseleave="mouseout(data)">
      <span>{{ node.label }}</span>
      <div v-show="data.dropdownShow" @click.stop="()=>{}" >
        <el-dropdown placement="right-start" trigger="click">
          <i class="el-icon-s-operation"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus" @click.native="addPeerTree(node,data)">新增同级</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus" @click.native="addChildrenTree(node,data)">新增下级</el-dropdown-item>
            <el-dropdown-item icon="el-icon-edit-outline" @click.native="updateTree(node,data)">修改</el-dropdown-item>
            <el-dropdown-item icon="el-icon-delete-solid" @click.native="delTree(node,data)">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </span>
  </el-tree>
</template>

<script>
import { map, range } from 'lodash'
// 构造树形数据
const treeData = [
  {
    label: 'Side menu'
  },
  ...map(range(1, 10), (index1) => ({
    label: 'Menu item  ' + index1,
    children: map(range(1, 20), (index2) => ({
      label: 'Menu item ' + index1 + '-' + index2,
      children: map(range(1, 5), (index3) => ({
        label: 'Menu item ' + index1 + '-' + index2 + '-' + index3
      }))
    }))
  }))
]

export default {
  name: 'DemoTreeSide',
  data () {
    return {
      data: treeData
    }
  },
  methods: {
    mouseover (data) { // 移入
      this.$set(data, 'dropdownShow', true)
    },
    mouseout (data) { // 移除
      this.$set(data, 'dropdownShow', false)
    },
    addPeerTree (node, data) {
      console.log('新增同级')
    },
    addChildrenTree (node, data) {
      console.log('新增下级')
    },
    updateTree (node, data) {
      console.log('修改')
    },
    updateTdelTreeree (node, data) {
      console.log('删除')
    }
  }
}
</script>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 10px;
    height:100%
 }
</style>

代码部分解释和需要注意的地方

1.通过给数据动态加入dropdownShow属性来控制功能按钮的显示和隐藏，不然鼠标移入后，所有节点都会显示功能按钮
2.因为鼠标事件是绑定到span标签（即文本）的，所以要设置高度为100%，不然会出现从一个节点移动到另一个节点时，看到是移上去了但是功能按钮未显示的bug（节点间隔越大，越容易看到）。
3.通过@click.stop="()=>{}"禁用掉div部分的el-tree点击事件，实现节点事件和下拉菜单事件区分

效果