el-tree 自定义右键事件

<template slot="leftTree">
  <el-tree 
   class="filter-tree"
   :data="treeList"
   highlight-current
   :default-expanded-keys="expandedKeys"
   :props="defaultProps"
   node-key="label"
   ref="tree"
   @node-click="handleNodeClick">
     <span class="custom-tree-node" slot-scope="{ node, data }">
       <template>
         <p @contextmenu.prevent="openMenu($event,node)" style="width:100%">
           <span>{{data.label}}</span>
         </p>
         <ul
          v-show="visible"
          :style="{ left: left + 'px', top: top + 'px' }"
          class="contextmenu">
           <li class="contextmenuli" v-for="(item,index) in liDataList" :key="index">
            <img :src="item.src" alt="" srcset="">
            <button :disabled="item.disabled" class="contextmenubtn">{{item.label}}</button>
           </li>
         </ul>
       </template>
     </span>
  </el-tree>
</template>

 

<script>
    data(){
        return{
            // 测试
            visible: false,
            top: 0,
            left: 0,
            // 菜单
            liDataList:[
                {
                  src:require('@/assets/image/sql.png'),
                  label:'查询',
                  disabled:false
                },
                {
                  src:require('@/assets/image/design.png'),
                  label:'设计表',
                  disabled:false
                },
                {
                  src:require('@/assets/image/create.png'),
                  label:'新建表',
                  disabled:false
                },
                {
                  src:require('@/assets/image/design.png'),
                  label:'Insert编辑',
                  disabled:false
                },
                {
                  src:require('@/assets/image/update.png'),
                  label:'刷新',
                  disabled:false
                },
                {
                  src:require('@/assets/image/extend.png'),
                  label:'属性',
                  disabled:false
                }
            ]
        }
    },
    watch: {
        //   监听属性对象，newValue为新的值，也就是改变后的值
        visible(newValue, oldValue) {
          if (newValue) {
            //菜单显示的时候
            // document.body.addEventListener，document.body.removeEventListener它们都接受3个参数
            // ("事件名" , "事件处理函数" , "布尔值");
            // 在body上添加事件处理程序
            document.body.addEventListener("click", this.closeMenu);
          } else {
            //菜单隐藏的时候
            // 移除body上添加的事件处理程序
            document.body.removeEventListener("click", this.closeMenu);
          }
        }
     },
    methods: {
        //右击
    openMenu(e,node) {
          var x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
          var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
          this.top = y;
          this.left = x;
          this.visible = true;//显示菜单
          this.liDataList.forEach((i,index)=>{
            if(e.srcElement.innerText==='Tables'){
              if(i.label !=='查询' && i.label!=='新建表' && i.label!=='刷新'){
                this.liDataList[index].disabled = true
              }else {
                this.liDataList[index].disabled = false
              }
            }else if(e.srcElement.innerText==='Views'){
              if(i.label !=='查询' && i.label!=='刷新'){
                this.liDataList[index].disabled = true
              }else {
                this.liDataList[index].disabled = false
              }
            }else if(node.parent.data.label === 'Tables'){
              if(i.label==='刷新'){
                this.liDataList[index].disabled = true
              }else {
                this.liDataList[index].disabled = false
              }
            }else if(node.parent.data.label === 'Views'){
              if(i.label!=='查询'){
                this.liDataList[index].disabled = true
              }else {
                this.liDataList[index].disabled = false
              }
            }
          })
        },
        //关闭菜单
        closeMenu() {
          this.visible = false; //关闭菜单
        },
    }
</script>

.filter-tree{
  /deep/ .el-tree-node__children{
    max-height: 500px;
    overflow-y: auto;
  }
  /deep/ .el-tree-node__content{
    width: 100%;
  }
  /deep/ .custom-tree-node{
      width: 100%;
  }
}
.contextmenu {
  width: 108px;
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: fixed; //关键样式设置固定定位
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
}

.contextmenu li {
  width: 100%;
  margin: 0;
  padding: 7px 16px;
  cursor: default;
  border-bottom: 1px solid #ededed;
  img{
    width:18px;height:16px;margin-right: 7px;float: left;
  }
  .contextmenubtn{
    width: 100%;
    text-align: left;
    border: none;
  }
  &:hover{
    background: #a5a5a542;
  }
}

效果图