【vue】使用vue+element搭建項目，Tree樹形控件使用

 

1.依賴安裝

本例中，使用render-content進行樹節點內容的自定義，所以須要支持JSX語法。(見參考資料第3個)

在Git bash中運行一下指令
cnpm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev

 2.經常使用屬性

Attributes　　　　　　　　　　　　des　　　　　　　　　　　　　　type　　　　　　　　default　　　　　　　　　　　　　　

node-key　　　　　　　　　　　　每一個樹節點用來做爲惟一標識的屬性，　　　　string　　　　　　　　　　　無默認值

　　　　　　　　　　　　　　　　　　整棵樹應該是惟一的　　　　　　　　

default-expanded-keys　　　　　　默認展開的節點的key的數組　　　　　　　　 array　　　　　　　　　　　無默認值

 auto-expand-parent　　　　　　　展開子節點的時候是否自動展開父節點　            boolean　　　　　　　　　　默認值true

props　　　　　　　　　　　　　   配置選項　　　　　　　　　　　　　　　　    object　　　　　　　   　　　無默認值

render-content　　　　　　　　　　樹節點的內容區的渲染Function　　　　           Function(h,{node,data,store})　　　 無

 highlight-current　　　　　　　　　是否高亮當前選中節點　　　　　　　　　       boolean　　　　　　　　　　　　　false　

 expand-on-click-node　　　　　　是否在點擊節點的時候展開或者收縮節點，　    boolean　　　　　　　　　　　　　 true

　　　　　　　　　　　　　　　　默認值爲 true，若是爲 false，

　　　　　　　　　　　　　　　　則只有點箭頭圖標的時候纔會展開或者收縮節點。

 

lazy　　　　　　　　　　　　　　是否懶加載子節點，需與 load 方法結合使用　　  boolean　　　　　　　　　　　alse

load　　　　　　　　　　　　　　加載子樹數據的方法，僅當 lazy 屬性爲true 時生效　　 function(node, resolve)　　　　　　  無

Events

node-click　　　　　　　　　　　節點被點擊時的回調　　　　　　共三個參數，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　依次爲：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　傳遞給 data 屬性的數組中該節點所對應的對象、

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　節點對應的 Node、

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　節點組件自己。

　　

 

3.應用：

 

3.1 html代碼

 

<el-tree
    node-key="id" :default-expanded-keys="[0]" //0對應下方①
    :auto-expand-parent="true"
    :props="defaultProps" 
    :render-content="renderContent" 
    :highlight-current="true" 
    :expand-on-click-node="false" lazy 
    :load="loadChildData" 
    @node-click="handleNodeClick">
</el-tree>

 ps:

• 本例中點擊節點箭頭時才展開子級節點，執行loadChildData操做，選中節點（並不是箭頭）時才執行handleNodeClick操做

•  將tree的某些節點設置爲默認展開時，須要設置　default-expanded-keys　和　node-key，二者缺一不可。其中node-key的值爲節點數據中的一個字段名，該字段在整棵樹中是惟一的。

  例如：node-key="id",

  其中default-expanded-keys的值爲數組，其值爲展開項的id。好比：:default-expanded-keys="[2, 3]"

•  lazy 須要和load結合使用，本例中採用懶加載，動態加載節點數據的方法加載數據

• 會調2次接口，第一次接口爲第一級數據，第二次爲第一級的child數據，此結果於

  :default-expanded-keys="[0]" ，

  lazy

  :load="loadChildData"這是三個屬性有關

 

3.2應用中用到的屬性用法

 

3.2.1     :default-expanded-keys(默認展開項)

 

<el-tree
  :data="data2"
  show-checkbox
  node-key="id" :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]"
  :props="defaultProps">
</el-tree>

<script>
  export default {
    data() {
      return {
        data2: [{
          id: 1,
          label: '一級 1',
          children: [{
            id: 4,
            label: '二級 1-1',
            children: [{
              id: 9,
              label: '三級 1-1-1'
            }, {
              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'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

 

default-expanded-keys（默認展開的節點）效果圖

 

3.2.2    :props="defaultProps" 用法

 

:props="defaultProps" 
defaultProps: {
    children: 'children',
    label: 'title',
    
},

3.2.3經過render-content方法定義樹節點內容(js代碼)

 renderContent(h, { node, data, store }) {
     let icon;
     let platForm;
     let isShow = false;
     if(platForm == 0){
         icon = （ <icon-svg icon-style="icon-style" icon-class="el-icon-pc"></icon-svg>）;
　　　　　isShow = true;　
     }else{
         icon = （ <icon-svg icon-style="icon-style" icon-class="el-icon-wx"></icon-svg>）;
　　　　　isShow = false;
　　　}
      return ( <span style="font-size: 14px; padding-right: 8px">
                    <span class="normalText"> {icon} <span style="color: #333;"> {node.label} </span>
                    </span> {isshow ? '' :
                        <span class="pos-a" style="right:20px; top:0;">
                            <span style="font-size: 12px;line-height: 30px;"
                                on-click={() => this.operation(node, data, event)}>
                                <icon-svg icon-style="icon-style" icon-class="el-icon-ifcn-gengduo"></icon-svg>
                            </span>
                        </span>
                    }

                </span> );
}                

3.2.4 :load="loadChildData" （load 加載子樹數據的方法，僅僅當lazy屬性爲true時生效）(js代碼)

loadChildData(node, resolve) {
      ......接口調用

        resolve(接口數據);//內容更新

　　　　//第一級爲選中並執行node-click操做

　　　　if (node && node.level == 0){

　　　　　　this.levelTwoDatas = node.childNodes[0];

　　　　　　this.$nextTick(function () {//

　　　　　　　　let obj= document.getElementsByClassName('el-tree-node__content')[0];

　　　　　　　　obj.click();

　　　　　　})

　　　　}

},

node:

 3.2.5 @node-click="handleNodeClick"

handleNodeClick(data, node, vuecomponent) {
    console.log('data:',  data,'\n' ,'node:', node, '\n', 'vuecomponent',vuecomponent);
}

data:(當前選中節點的數據)

 

 

 

node: (node當前節點的信息,含當前節點的數據data(和上圖一致),父節點的信息parent)

 

 

 3.2.6更新二級數據

this.$set(this.levelTwoDatas, 'children', []);
this.levelTwoDatas.data.children = 接口數據；

 

3.2.7接口狀況

第一次調接口的數據：

 

 

第2次調接口，樹節點數據（根據父節點的id,獲取子節點數據）

 

 

3.2.8頁面效果圖：

 

 

 

 

相關連接：http://element.eleme.io/#/zh-CN/component/tree

　　　　   http://www.php.cn/js-tutorial-378333.html

　　　　 https://blog.csdn.net/u014628388/article/details/76099812

　　　　　

做者：smile.轉角

QQ：493177502