ElementUI Tree樹形控件怎么用

小編給大家分享一下ElementUI Tree樹形控件怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一，數據渲染

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樹形控件怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！