1、在el-tree 中添加方法?@node-contextmenu="rightClick"

   <el-tree :data="data" 
:props="defaultProps"
 @node-contextmenu="rightClick" 
@node-click="treeNodeClick">
</el-tree>

2、建立一個(gè)右鍵組件，可以使用 el-menu 組件，優(yōu)點(diǎn)是，可以借助el-menu 的 selec方法進(jìn)行增刪改查以及樣式不用手寫了，弊端是不容易獲取點(diǎn)擊的Dom，先暫時(shí)這樣寫吧

          <!-- 樹形控件右鍵組件 -->
          <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
            
              <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" >

                <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
                  <span slot="title">新增課時(shí)</span>
                </el-menu-item>
                <el-menu-item index="2" style="font-size: 12px;">
                  <span slot="title">刪 除</span>
                </el-menu-item>
              </el-menu>
          </div>

3、methods中的寫法

  rightClick(e, data, node) {
      this.menuShow = false // 先把模態(tài)框關(guān)死，目的是 第二次或者第n次右鍵鼠標(biāo)的時(shí)候 它默認(rèn)的是true
      this.menuShow = true
      e.preventDefault() //關(guān)閉瀏覽器右鍵默認(rèn)事件
      this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
      document.addEventListener('click',(ev)=>{
        // ev.stopImmediatePropagation()
        if(ev.target!==document.querySelector('.el-menu-item.is-active')){ 
          this.foo() 
        }
      })

    },
    foo() {
      // 取消鼠標(biāo)監(jiān)聽事件 菜單欄
      this.menuShow = false
      document.removeEventListener('click', this.foo) // 關(guān)掉監(jiān)聽，
    },

3、點(diǎn)擊樹狀節(jié)點(diǎn)時(shí)，關(guān)閉右鍵組件

  treeNodeClick(){
      this.foo() 
    },

4、css樣式

.tree_rightmenu {
  position: fixed;
  width: 120px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 1000;
}

5、最終效果

存在問題：在右鍵彈出的組件中，點(diǎn)擊右鍵，會(huì)默認(rèn)彈出瀏覽器的右鍵菜單欄；

想到的解決辦法是，點(diǎn)擊該節(jié)點(diǎn)時(shí)，使用原生js的?contextmenu 事件，在事件中用 e.preventDefault（）方法進(jìn)行阻止

最后建議使用vue右鍵插件?vue-contextmenujs文章來源地址http://www.zghlxwxcb.cn/news/detail-756055.html

到了這里，關(guān)于Element UI中el-tree 添加右鍵菜單的方法，附帶問題和解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！