現在のノード データを取得するための Vue 配列の右クリック メニュー

データ トラバーサルまたはページ上で右クリック メニューを使用する必要がある場合は、次の解決策を検討できます。
古いルールでは、最初に図を確認します。

使用方法:
1. npm import

npm i vue-node-context-menu

2. main.jsに導入

import VueNodeContextMenu from 'vue-node-context-menu';

3. コンポーネントで 3.1、HTML を使用します
。HTML で v-node-context-menu ディレクティブを使用します。

<div style="width:500px;height:500px;background:#000;" v-node-context-menu="{node:item,menu:menu}" v-for="(item,index) in list" >{
    
    {
    
    item.name}}</div>

3.2、js

data(){
    
    
  return {
    
    
    list:[ //当前想要遍历的数据
      {
    
    
        name:'1',
        id:0
      }
    ],
    menu:[ //右键菜单
      {
    
    
        text:"返回",
        icon:"",
        handler:this.nodeConextMenu #回调行数
      },
      {
    
    
        text:"重新加载",
        icon:"",
        handler:this.nodeConextMenu
      },
      {
    
    
        text:"打印",
        icon:"",
        handler:this.nodeConextMenu
      }
    ]
  }
},
methods:{
    
    
  #click menu to callbck  点击菜单选项的回调函数 node 为当前点击的数据，menu为当前点击菜单的对象
  nodeConextMenu(node,menu){
    
    
  	
  }
}

フィールドの説明
:
v-node-context-menu

分野	説明する	必要ですか?
v-node-context-menu	右クリックメニューのコマンドをカスタマイズする	はい
ノード	現在通過中のアイテム	いいえ
メニュー	右クリックメニューのオプション	はい

メニュー

分野	説明する	必要ですか?
文章	メニュー名	はい
アイコン	アイコン	いいえ
ハンドラ	メニューのコールバック関数をクリックすると、function(node,menu) は 2 つのパラメータを返します。node: は現在クリックされているデータ、menu は現在クリックされているメニューのデータです。	はい