前言：

因為專案需要用Vue做一個管理系統，其中有一個公司部門的管理頁面有用到ElementUI 的樹形控制元件，但是結構中沒有使用chexkBox選項框，針對這個功能碰到的一些問題做一下總結

一，資料渲染

1）在<el-tree>標籤中繫結data屬性

2）在vue例項的data中宣告list變數

3）從後臺獲取到的資料是以數組裡面巢狀多個物件的結構並賦值給list，

當前的資料是OrgName為當前結構名稱，

Children作為子分支陣列，

子分支中的結構與當前結構一致

4）在頁面中展示結構的方法是在<el-tree>標籤中繫結porps屬性，

並在vue例項的data中用label屬性定義顯示的名稱，

用childern屬性繫結展示的子分支資料

5）最後展示的結構如下

二，點選當前分支獲取當前分支與上級分支的值

1）此處使用的是@node-click事件並繫結一個函式，

函式在vue例項的methods中定義，並可以接收兩個引數node與data

2）node是一個物件，

就是點選當前分支獲得的資料，

如果只需要當前層級的資料的話就可以使用node，

後臺有一併返給我上級的ID，

但是頁面中點選分支後還需要顯示上級的名稱，

所以此處使用node就不太夠

3）data同樣也是一個物件，

他的data屬性包含的就是當前分支的值，

其中的parent屬性就包含了他上級的值，

甚至裡面的parent屬性還包含更上一級的值一直到最外層，

可以根據自己當前專案的需要來選擇使用data還是node來取到自己需要的值

三，el-tree 樹形控制元件給節點新增圖示

<template>
  <div class="tree">   
  
  <el-tree :data="data5" node-key="id" default-expand-all >
    <span class="custom-tree-node" slot-scope="{ node,data }">
      <span>
        <i :class="node.icon"></i>{{ node.label }}
      </span>       
    </span>
  </el-tree>

  </div>
</template>

<script>
  export default {
    data () {
      return {
         data5: [{
          id: 1,label: '一級 1',icon:'el-icon-success',children: [{
            id: 4,label: '二級 1-1',children: [{
              id: 9,label: '三級 1-1-1',icon: 'el-icon-info'
            },{
              id: 10,label: '三級 1-1-2'
            }]
          }]
        },{
          id: 2,label: '一級 2',children: [{
            id: 5,label: '二級 2-1',},{
            id: 6,label: '二級 2-2'
          }]
        },{
          id: 3,label: '一級 3',children: [{
            id: 7,label: '二級 3-1'
          },{
            id: 8,label: '二級 3-2'
          }]
        }]
      }
    }
  
  }
</script>

<style scoped>

</style>

到此這篇關於ElementUI Tree 樹形控制元件的使用並給節點新增圖示的文章就介紹到這了,更多相關Element Tree 樹形控制元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！