vue+element的tree元件學習模板

阿新 • • 發佈：2019-01-14

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
             <el-tree 
 v-loading="loading" style="width: 400px;"
              ref="tree"
              :props="defaultProps"
              :load="loadNode"
              :data="items"
              node-key="id"
              :expand-on-click-node="false"
              lazy
              :check-strictly="true"
              @check-change 
="checkChange"
              show-checkbox>
            </el-tree>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        new 
 Vue({
            el: '#app',
            data() {
                return {
                    defaultProps: {
                        label: 'name',
                        children: 'zones',
                        isLeaf: 'leaf'
                    },
                    items: [],
                    loading: true,
                    selecte: {},
                    count: 1,
                }
            },
            created:function(){
                // 一開始模擬獲取資料，使v-loading=true,獲取資料之後再把v-loading複製為false
               setTimeout(() => {
                 this.getChildren(0);
               }, 2000);
            },
            methods: {
                loadNode(node, resolve){
                    // 載入樹節點
                    console.log(node);
                    if (node.level === 0) {
                        return resolve(this.items);
                    }

                    if (node.level >= 1) {
                        if(!node.data.leaf){
                            // 非葉子節點
                            this.getChildren(node.data.id, resolve);
                        }else{
                            return resolve([]);
                        }
                    }
                },
                getChildren(id, resolve){
                    // 根據獲取孩子節點
                    let data;
                    // 模擬 Ajax 請求
                    if(id == 0){
                        respone = [{ 
                            name: 'region1',
                            id: 1,
                            leaf: false,
                        }, {
                            name: 'region2',
                            id: 2,
                            leaf: true,
                        }];
                        this.items = respone;
                        this.loading = false;
                    }else{
                        let hasChild = Math.random() > 0.5;

                        if (hasChild) {
                        data = [{
                            name: 'zone' + this.count++,
                            id: this.count+1
                        }, {
                            name: 'zone' + this.count++,
                            id: this.count+1
                        }];
                        } else {
                            data = [];
                        }
                    }
                    setTimeout(() => {
                        return resolve && resolve(data);
                    }, 500);

                },
                checkChange(data, checked, indeterminate) {
                    // 實現單選
                    console.log(data);
                    if(checked){
                        // 當前點選為選擇狀態而不是取消選擇
                        this.selected = data;
                    }
                    // 獲取當前所有被選中節點的id所組成的陣列
                    let nodes = this.$refs.tree.getCheckedKeys();
                    if(nodes.length == 0 || nodes.length == 1) return;
                    // 注意傳入的引數是陣列
                    this.$refs.tree.setCheckedKeys([data.id]);
                },
            }
        })
    </script>
</html>

線上演示
在渲染 tree 的節點之前，需要先獲取資料再填充到 tree 裡面，這時候可以先對<el-tree>標籤設定屬性v-loading='true'，這樣 tree 就會有一個載入的動態動畫，直到獲取到想要的資料之後便可以通過v-loading='false'取消載入動畫，這時候 tree 的初始資料已經渲染完畢。
el-tree 標籤的:load="loadNode"屬性用於定義載入子樹的方法 function(node, resolve)，結合 lazy 屬性便可以實現懶載入來動態載入子樹，注意 resolve() 函式接收一個數組物件作為引數來渲染 tree 的子樹。
為el-tree 標籤新增 show-checkbox屬性可實現節點可選擇，定義node-key屬性來確定每個樹節點的唯一標識，方便獲取和選定製定的節點。
定義@check-change="checkChange"方法來處理實現單選的邏輯或者其他邏輯，這個節點選中狀態發生變化時的回撥函式共三個引數，依次為：傳遞給 data 屬性的陣列中該節點所對應的物件、節點本身是否被選中、節點的子樹中是否有被選中的節點，使用this.$refs.tree.getCheckedKeys()返回目前被選中的節點所組成的陣列，注意是返回的是 node-key 屬性定義的唯一標識，所以需要先設定 node-key 屬性，使用 this.$refs.tree.setCheckedKeys([data.id])設定目前勾選的節點，注意傳入的引數是 node-key 屬性定義的唯一標識所組成的陣列。
為<el-tree>標籤新增:expand-on-click-node="false"可實現只有點箭頭圖示的時候才會展開或者收縮節點。
為<el-tree>標籤新增:check-strictly="true""可嚴格的遵循父子不互相關聯的做法，這樣點選子節點父節點就不會有相應的被選中狀態，以及點選子節點時父節點不會觸發 check-change函式。
為<el-tree>標籤新增default-expand-all "true"可實現預設展開所有節點。

vue+element的tree元件學習模板

vue+element的tree元件學習模板

Vue元件--引用模板

Vue元件學習

Vue ：元件元件模板的一些問題

Vue 2.0 學習筆記一基於webpack模板建立專案

Web前端學習筆記——AngularJS之元件、模板語法

Vuejs2.0學習之二（Render函式,createElement，vm.$slots，函式化元件，模板編譯，JSX）

認識Vue.js的元件和模板

vue的原始碼學習之六——6.非同步元件

vue的原始碼學習之六——5.元件註冊

vue的原始碼學習之六——2.createComponent虛擬DOM元件

vue的原始碼學習之六——1.元件化（介紹）

學習筆記——Vue的元件化之notification元件

vue.js 2.0父子元件學習入門套路

vue元件學習6（props傳參）

vue的指令與模板

vue-router 入門學習

vue+node.js學習筆記

Vue.js 基礎學習計算屬性computed

Vue.js 基礎學習之混合mixins

vue+element的tree元件學習模板

相關推薦