許久不用，element-ui已經更新至2.4.1版本。直接進入今天的正題，前提是node.js的環境還有vue及elment-ui都已經安裝。因爲element-ui的官方文檔中介紹比較粗略，試了許久才成功，所以將其記錄。（PS:屬性控件的另外一個開源插件庫有Z-tree，功能較爲豐富）html
首先看到自定義節點內容部分，指明瞭能夠在節點區添加按鈕或圖標。vue
一 添加節點自定義圖標
但全部的實例中卻沒有看到有圖標，自定義部分只有經過按鈕增長/刪除節點。因而在線運行該實例，在數據項中添加icon，於html中引用，成功了：
HTML:node
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:element-ui
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及節點組件自己。看起來比較抽象，咱們綁定實現一個右鍵事件，打印出對應的參數看一看就知道了。app
在上圖的資源樹上，當點擊「一級1」節點時，打印輸出參數：flex
粗略知道參數1，是一個點擊事件，包括了點擊的位置信息；參數2是一個對象；後面兩個參數也是一個對象。咱們詳細的展開四個參數具體內容：ui
參數1 this
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：因爲尚未作菜單的隱藏，因此點擊二級節點時，以前的菜單仍是存在於原來的位置^ ^）