el-tree节点点击空白处无法获取dom

事情的发展是这样子的，记下此篇，以防后续自己再次走弯路

 

需求：目录树，右键有菜单，菜单中按钮会随着节点变化而显示和隐藏，比如根节点不允许删除和修改以及新增同级节点，子节点允许这些按钮存在

我的解决方案：点击的时候获取了节点数据，然后右键就能控制显示和隐藏

然而：用户操作不近如人意，他没有先选中，再右键，直接鼠标放到节点上面就右击了，而且是节点空白处

卧槽，这就尴尬了，按钮都出来了， 然后就能删除了。。。。。

 

反思：我的开始思路有问题，右键的时候，应该先判断是否获取到数据了，然后再决定要不要显示操作菜单

 

解决方案：

（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>&nbsp;&nbsp;新增同级节点</li>
            <li @click="addSonTree()"><i class="el-icon-plus"></i>&nbsp;&nbsp;新增子节点</li>
            <li v-if="treeFormData.name !== '数据目录'" @click="editTree()"><i class="el-icon-edit"></i>&nbsp;&nbsp;修改</li>
            <li v-if="treeFormData.name !== '数据目录'" @click="delTree()"><i class="el-icon-delete"></i>&nbsp;&nbsp;删除</li>
            <div class="flowNodeRightMenu_divider"></div>
            <li @click="dataRelease()"><i class="el-icon-s-promotion"></i>&nbsp;&nbsp;发布</li>
            <li @click="dataUnRelease()"><i class="el-icon-refresh-left"></i>&nbsp;&nbsp;撤销发布</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% 
}