el-tree 鼠標移入節點顯示 新增 刪除 等按鈕【Vue】

要達到這樣的效果：

<el-tree default-expand-all :data="data">
   <span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
    <span>{{ node.label }}</span>
       <el-link v-show="data.show" size="mini" style="margin-left: 5px" type="primary" icon="el-icon-plus"></el-link>
       <el-link v-show="data.show" size="mini" style="margin-left: 5px" type="primary" icon="el-icon-delete"></el-link>   
    </span>
</el-tree>

(data.show 是指的每條數據里的show)

 

       data: [
          {
            id: 0,
            label: '水果',
            show: false,
            children: [
              {
                id: 1,
                label: '蘋果',
                show: false
              },{
                id: 2,
                label: '芒果',
                show: false
              }
            ]
          }
        ],

　　最后根據鼠標 mouseenter mouseleave改變show的狀態即可

mouseenter(data) {
  console.log(data)
  data.show = true
}

mouseleave(data) {
  console.log(data)
  data.show = false
}

最后點擊加號或刪除 觸發事件 就在對應的圖標上添加方法就好