事情的发展是这样子的，记下此篇，以防后续自己再次走弯路
需求：目录树，右键有菜单，菜单中按钮会随着节点变化而显示和隐藏，比如根节点不允许删除和修改以及新增同级节点，子节点允许这些按钮存在
我的解决方案：点击的时候获取了节点数据，然后右键就能控制显示和隐藏
然而：用户操作不近如人意，他没有先选中，再右键，直接鼠标放到节点上面就右击了，而且是节点空白处
卧槽，这就尴尬了，按钮都出来了， 然后就能删除了。。。。。
反思：我的开始思路有问题，右键的时候，应该先判断是否获取到数据了，然后再决定要不要显示操作菜单
解决方案：
（1）第一种方案：右键时，先判断当前是否获取到节点数据，当没有获取到数据的时候，给出提示：“请先选中节点”，有数据的情况下再显示操作菜单
（2）第二种方案：添加鼠标移入事件，并且控制鼠标在移到节点空白处的时候，也可以获取到节点数据，el-tree本身移到到空白处是无法获取到的，只能移动到文字上面才能获取到，通过改变节点样式解决此问题
上代码：
<el-aside> <div :style="rightMenuStyle" class="flowNodeRightMenu" @mouseleave="leaveRightMenu"> <ul> <li v-if="treeFormData.name !== ‘数据目录‘" @click="addTree()"><i class="el-icon-plus"></i> 新增同级节点</li> <li @click="addSonTree()"><i class="el-icon-plus"></i> 新增子节点</li> <li v-if="treeFormData.name !== ‘数据目录‘" @click="editTree()"><i class="el-icon-edit"></i> 修改</li> <li v-if="treeFormData.name !== ‘数据目录‘" @click="delTree()"><i class="el-icon-delete"></i> 删除</li> <div class="flowNodeRightMenu_divider"></div> <li @click="dataRelease()"><i class="el-icon-s-promotion"></i> 发布</li> <li @click="dataUnRelease()"><i class="el-icon-refresh-left"></i> 撤销发布</li> </ul> </div> <div class="tree-scroll"> <el-tree v-if="elVisible" ref="tree" class="flow-tree" node-key="id" :props="treeProps" :data="treeData" highlight-current :default-expanded-keys="expendArr" @node-click="treeClick" @node-contextmenu="treeRightClick" > <span slot-scope="{ node, data }" class="flowTree" @mouseenter="mouseenter(data)"> <span style="width: 100%">{{ node.label }}</span> </span> </el-tree> </div> </el-aside>
treeRightClick(event, data, node, obj) { this.rightMenuStyle.display = ‘block‘ var top = event.clientY - 110; var left = event.clientX - 220 this.rightMenuStyle.top = top + ‘px‘ this.rightMenuStyle.left = left + ‘px‘ document.addEventListener(‘click‘, this.leaveRightMenu) },
treeClick(data) { this.treeFormData = data this.getFileDataList() },
重点在于这个样式：加了这个样式，点击空白处就可以了
.flowTree{
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 10px;
height:100%
}