快捷導(dǎo)航

ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)

更新時(shí)間：2020年02月27日 11:44:06 作者：mrballjiang

這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言：

因?yàn)轫?xiàng)目需要用Vue做一個(gè)管理系統(tǒng)，其中有一個(gè)公司部門的管理頁面有用到ElementUI 的樹形控件，但是結(jié)構(gòu)中沒有使用chexkBox選項(xiàng)框，針對(duì)這個(gè)功能碰到的一些問題做一下總結(jié)

一，數(shù)據(jù)渲染

1）在<el-tree>標(biāo)簽中綁定data屬性

2）在vue實(shí)例的data中聲明list變量

3）從后臺(tái)獲取到的數(shù)據(jù)是以數(shù)組里面嵌套多個(gè)對(duì)象的結(jié)構(gòu)并賦值給list，

當(dāng)前的數(shù)據(jù)是OrgName為當(dāng)前結(jié)構(gòu)名稱，

Children作為子分支數(shù)組，

子分支中的結(jié)構(gòu)與當(dāng)前結(jié)構(gòu)一致

4）在頁面中展示結(jié)構(gòu)的方法是在<el-tree>標(biāo)簽中綁定porps屬性，

并在vue實(shí)例的data中用label屬性定義顯示的名稱，

用childern屬性綁定展示的子分支數(shù)據(jù)

5）最后展示的結(jié)構(gòu)如下

二，點(diǎn)擊當(dāng)前分支獲取當(dāng)前分支與上級(jí)分支的值

1）此處使用的是@node-click事件并綁定一個(gè)函數(shù)，

函數(shù)在vue實(shí)例的methods中定義，并可以接收兩個(gè)參數(shù)node與data

2）node是一個(gè)對(duì)象，

就是點(diǎn)擊當(dāng)前分支獲得的數(shù)據(jù)，

如果只需要當(dāng)前層級(jí)的數(shù)據(jù)的話就可以使用node，

后臺(tái)有一并返給我上級(jí)的ID，

但是頁面中點(diǎn)擊分支后還需要顯示上級(jí)的名稱，

所以此處使用node就不太夠

3）data同樣也是一個(gè)對(duì)象，

他的data屬性包含的就是當(dāng)前分支的值，

其中的parent屬性就包含了他上級(jí)的值，

甚至里面的parent屬性還包含更上一級(jí)的值一直到最外層，

可以根據(jù)自己當(dāng)前項(xiàng)目的需要來選擇使用data還是node來取到自己需要的值

三，el-tree 樹形控件給節(jié)點(diǎn)添加圖標(biāo)

<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: '一級(jí) 1',
          icon:'el-icon-success',
          children: [{
            id: 4,
            label: '二級(jí) 1-1',
            children: [{
              id: 9,
              label: '三級(jí) 1-1-1',
              icon: 'el-icon-info'
            }, {
              id: 10,
              label: '三級(jí) 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一級(jí) 2',
          children: [{
            id: 5,
            label: '二級(jí) 2-1',
          }, {
            id: 6,
            label: '二級(jí) 2-2'
          }]
        }, {
          id: 3,
          label: '一級(jí) 3',
          children: [{
            id: 7,
            label: '二級(jí) 3-1'
          }, {
            id: 8,
            label: '二級(jí) 3-2'
          }]
        }]
      }
    }
  
  }
</script>

<style scoped>

</style>

到此這篇關(guān)于ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)的文章就介紹到這了,更多相關(guān)Element Tree 樹形控件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: