驗證明現element-ui樹形控件的自定義圖標及右鍵菜單

 

 

許久不用，element-ui已經更新至2.4.1版本。直接進入今天的正題，前提是node.js的環境還有vue及elment-ui都已經安裝。因爲element-ui的官方文檔中介紹比較粗略，試了許久才成功，所以將其記錄。（PS:屬性控件的另外一個開源插件庫有Z-tree，功能較爲豐富）

首先看到自定義節點內容部分，指明瞭能夠在節點區添加按鈕或圖標。

一 添加節點自定義圖標

但全部的實例中卻沒有看到有圖標，自定義部分只有經過按鈕增長/刪除節點。因而在線運行該實例，在數據項中添加icon，於html中引用，成功了： 
HTML:

 1 div id="app">
 2   <div class="block">
 3   /* 自定義節點的有兩種方法，直接經過slot-scope實現，就再也不搗騰另外一種方法了，想必也是大同小異 */
 4     <p>使用 scoped slot</p>
 5     <el-tree :data="data5" node-key="id" default-expand-all :expand-on-click-node="false">
 6       <span class="custom-tree-node" slot-scope="{ node, data }">
 7         <span> <i :class="node.icon"></i>{{ node.label }}</span>
 8         <span>
 9           <el-button type="text" size="mini" @click="() => append(data)">
10             Append
11           </el-button>
12           <el-button type="text" size="mini" @click="() => remove(node, data)">
13             Delete
14           </el-button>
15         </span>
16       </span>
17     </el-tree> 
18   </div>
19 </div>

JS:

 1 data() {
 2       const data = [{
 3         id: 1,
 4         icon:"el-icon-delete",
 5         label: '一級 1',
 6         children: [{
 7           id: 4,
 8           label: '二級 1-1',
 9           children: [{
10             id: 9,
11             icon:'el-icon-info',
12             label: '三級 1-1-1'
13           }, {
14             id: 10,
15             label: '三級 1-1-2'
16           }]
17         }]
18       }, {
19         id: 2,
20         label: '一級 2',
21         children: [{
22           id: 5,
23           label: '二級 2-1'
24         }, {
25           id: 6,
26           label: '二級 2-2'
27         }]
28       }, {
29         id: 3,
30         label: '一級 3',
31         children: [{
32           id: 7,
33           label: '二級 3-1'
34         }, {
35           id: 8,
36           label: '二級 3-2'
37         }]
38       }];
39       return {
40         data5: JSON.parse(JSON.stringify(data))
41       }
42     },
43 
44     methods: {
45       append(data) {
46         console.log("當前data爲：",data);
47         const newChild = { id: id++, label: 'testtest', children: [] };
48         if (!data.children) {
49           this.$set(data, 'children', []);
50         }
51         data.children.push(newChild);
52       },
53 
54       remove(node, data) {
55         const parent = node.parent;
56         const children = parent.data.children || parent.data;
57         const index = children.findIndex(d => d.id === data.id);
58         children.splice(index, 1);
59       }
60     }

CSS:

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

 

 經過數據項來添加，不一樣的節點均可設置個性圖標。一樣數據源的動態變化也能夠動態生成資源樹。 

二 右鍵事件實現右鍵菜單項

查看Tree樹形組件的屬性、方法及事件說明，支持node-click節點點擊事件，還有node-contextmenu右鍵點擊觸發的事件。 
1. 右鍵事件的參數爲：event、data屬性數組中節點所對應的對象、節點對應的Node及節點組件自己。看起來比較抽象，咱們綁定實現一個右鍵事件，打印出對應的參數看一看就知道了。

在上圖的資源樹上，當點擊「一級1」節點時，打印輸出參數：

粗略知道參數1，是一個點擊事件，包括了點擊的位置信息；參數2是一個對象；後面兩個參數也是一個對象。咱們詳細的展開四個參數具體內容：

參數1 

MouseEvent中包含的有是否冒泡、相對於瀏覽器及頁面的點擊位置等等。右鍵菜單很明顯我確定要用到位置參數。

參數2 

而後能夠看到當前節點所對應的node,自己的icon，id及label，此外還有子節點信息children，能夠看到有一個——二級1-1（包括它的id、label等），且子節點下還有兩個子節點，及設置節點的一些原生方法。

參數3 

這裏則是被點擊當前樹形節點的本質屬性，包括是否有選擇框checked、data、是否展開expanded及id等，其中用紅線圈出的幾個地方我以爲是比較有用的，咱們能夠經過判斷是不是子節點及節點的層級，定義不一樣層級或者節點的不一樣行爲。例如，可能咱們的右鍵菜單隻在某些資源樹節點上有用。

參數4（沒有深究，暫時沒有用到） 

2. 前面不是還發現了節點的點擊事件node-click，因而猜測node-click和node-contextmenu衝突，點擊右鍵的時候會不會也出發了node-click。驗證以後發現擔憂是多餘的，node-click只是針對於鼠標左鍵，由於點擊右鍵時node-click事件並無被觸發。

在HTML中添加菜單項：

1 <div v-show = "menuVisible">
2     <ul id = "menu">
3       <li tabindex="-1" class="menu__item" id="menu-4994-1-0">Axure Components</li>
4       <li tabindex="-1" class="menu__item" id="menu-4994-1-1">Sketch Templates</li>
5       <li tabindex="-1" class="menu__item" id="menu-4994-1-2">組件交互文檔</li>
6     </ul>
7   </div>

且在vue數據項中定義menuVisible:false，el-tree上綁定node-contextmenu事件，在js中實現以下：

 1 rihgtClick(event,object,value,element){
 2         if(value.level == 1){
 3           this.menuVisible = true;
 4           let menu = document.querySelector("#menu");
 5         /* 菜單定位基於鼠標點擊位置 */
 6           menu.style.left = event.clientX + 20 + "px" ;
 7           menu.style.top = event.clientY -10 + "px";
 8         }
 9 
10         console.log("右鍵被點擊的event:",event);
11         console.log("右鍵被點擊的object:",object);
12         console.log("右鍵被點擊的value:",value);
13         console.log("右鍵被點擊的element:",element);
14 
15       },

因而只有在點擊一級節點時，右鍵纔會出現菜單項。正如上圖中所驗證的同樣，點擊二級節點時，咱們能夠看到打印信息位置明顯在下面且沒有出現菜單項。（PS：因爲尚未作菜單的隱藏，因此點擊二級節點時，以前的菜單仍是存在於原來的位置^ ^）