elementUI——Tree樹形控件源碼分析

說明：以下基于elementUI@2.13.1。

學(xué)習(xí)elementUI源碼前務(wù)必通過其官網(wǎng)熟悉其用法，包括props、事件、ref方法和dom結(jié)構(gòu)等。
el-tree代碼總共有1635行。

ElTree

1. dom結(jié)構(gòu)層次，render、slot和普通方式

  • 通過入口tree.vue文件，了解到，模板生成這塊，主要是通過tree-node.vue來生成樹形dom結(jié)構(gòu)：
<div
    class="el-tree"
    :class="{
      'el-tree--highlight-current': highlightCurrent,
      'is-dragging': !!dragState.draggingNode,
      'is-drop-not-allow': !dragState.allowDrop,
      'is-drop-inner': dragState.dropType === 'inner'
    }"
    role="tree"
  >
    <el-tree-node
      v-for="child in root.childNodes"
      :node="child"
      :props="props"
      :render-after-expand="renderAfterExpand"
      :show-checkbox="showCheckbox"
      :key="getNodeKey(child)"
      :render-content="renderContent"
      @node-expand="handleNodeExpand">
    </el-tree-node>
    <div class="el-tree__empty-block" v-if="isEmpty">
      <span class="el-tree__empty-text">{{ emptyText }}</span>
    </div>
    <div
      v-show="dragState.showDropIndicator"
      class="el-tree__drop-indicator"
      ref="dropIndicator">
    </div>
</div>

  • dom結(jié)構(gòu)


    dom結(jié)構(gòu)
  • 除了默認方式，節(jié)點內(nèi)容還支持jsx和slot兩種：
<node-content :node="node"></node-content>

// node-content組件
components: {
      NodeContent: {
        props: {
          node: {
            required: true
          }
        },
        render(h) {
          const parent = this.$parent;
          const tree = parent.tree;
          const node = this.node;
          const { data, store } = node;
          return (
            parent.renderContent
              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
              : tree.$scopedSlots.default
                ? tree.$scopedSlots.default({ node, data })
                : <span class="el-tree-node__label">{ node.label }</span>
          );
        }
    }
}

2. TreeStore Class：內(nèi)部通過Node Class維護了一份樹形結(jié)構(gòu)

在elTreede 入口vue文件tree.vue中，會通過TreeStore Class生成store對象：

this.store = new TreeStore({
        key: this.nodeKey,
        data: this.data,
        lazy: this.lazy,
        props: this.props,
        load: this.load,
        currentNodeKey: this.currentNodeKey,
        checkStrictly: this.checkStrictly,
        checkDescendants: this.checkDescendants,
        defaultCheckedKeys: this.defaultCheckedKeys,
        defaultExpandedKeys: this.defaultExpandedKeys,
        autoExpandParent: this.autoExpandParent,
        defaultExpandAll: this.defaultExpandAll,
        filterNodeMethod: this.filterNodeMethod
});

主要有以下作用：

  • tree-store的實例store會根據(jù)節(jié)點數(shù)據(jù)初始化節(jié)點，生成node，見下一節(jié)“節(jié)點初始化過程”；
this.root = new Node({ // this.root保存著根節(jié)點信息
      data: this.data,
      store: this
});
  • tree-store中nodeMap對象以{key: node}形式保存node；
  • 在下一節(jié)中我們會了解到，當(dāng)設(shè)置了lazy懶加載，那么就不會遍歷子節(jié)點數(shù)據(jù)進行初始化，所以需要在tree-store的最后調(diào)用load回調(diào)，遍歷子節(jié)點數(shù)據(jù)進行初始化，遞歸地方式將所有節(jié)點初始化。
if (this.lazy && this.load) {
      const loadFn = this.load;
      loadFn(this.root, (data) => {
        this.root.doCreateChildren(data);
        this._initDefaultCheckedNodes();
      });
    } else {
      this._initDefaultCheckedNodes();
    }
  • 根據(jù)prop defaultCheckedKeys（默認勾選的節(jié)點的 key 的數(shù)組）來設(shè)置各級節(jié)點的選中狀態(tài)。

3. 節(jié)點初始化過程（Node Class實例化）

節(jié)點初始化用到Node Class來實例化，是一個遞歸的過程，會根據(jù)節(jié)點數(shù)據(jù)及其后代數(shù)據(jù)逐步用Node Class封裝，其主要作用是封裝每層節(jié)點的各種狀態(tài)和各種操作，在此處用Class是非常適合的；其初始化主要過程有：

  • 將node以{key: node}形式注冊到store中的nodeMap對象；
  • 通過level屬性來設(shè)置不能節(jié)點的層級；
  • 通過childNodes來保存子節(jié)點Node Class實例，而在對應(yīng)的節(jié)點數(shù)據(jù)中是用children（也可以自定義）來保存子節(jié)點數(shù)據(jù);
  • 實例中通過data來保存原始的數(shù)據(jù)；
  • 通過checked和indeterminate來設(shè)置選中狀態(tài)，通過expanded和visible來設(shè)置展開和可見狀態(tài)，通過isCurrent來設(shè)置是否是選中節(jié)點，通過loading和loaded來設(shè)置加載狀態(tài)；
  • 根據(jù)el-tree的props屬性中的isLeaf，設(shè)置node的isLeafByUser屬性；
  • 根據(jù)defaultExpandAll，設(shè)置節(jié)點expanded;
  • 通過setData方法，遍歷children，生成Node實例，插入到node的childNodes中；
    詳細流程見下圖：
    節(jié)點初始化

    lazy加載示例：
<el-tree
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>

<script>
loadNode(node, resolve) {
  resolve([{id: 1}]) // 在內(nèi)部會將數(shù)組中的元素用Node實例化，并注入到當(dāng)前節(jié)點node的childNodes中
}
</script>

相關(guān)源碼：

loadData(callback, defaultProps = {}) {
    if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) {
      this.loading = true;

      const resolve = (children) => {
        this.loaded = true;
        this.loading = false;
        this.childNodes = [];

        this.doCreateChildren(children, defaultProps); // 將reslove入?yún)hildren分別用Node實例化并插入到當(dāng)前節(jié)點的node

        this.updateLeafState(); // 更新節(jié)點葉子狀態(tài)
        if (callback) {
          callback.call(this, children);
        }
      };

      this.store.load(this, resolve); // 上例中l(wèi)oadNode方法賦給了此處的load方法
    } else {
      if (callback) {
        callback.call(this);
      }
    }
  }

Node Class還有諸如insertBefore、insertAfter、expand和collapse等操作，后面涉及到再介紹。

4. 事件機制與拖拽

在官方網(wǎng)站上，tree組件對外暴露了13個事件，其中6個是跟拖拽有關(guān)。
4.1 在tree-node.vue文件中會看到，tree-node組件根節(jié)點上綁定了click事件和contextmenu事件：

click

contextmenu事件會觸發(fā)node-contextmenu事件；
click方法會觸發(fā)可能多達6種事件：

// tree-node.vue
handleClick() {
        const store = this.tree.store;
        store.setCurrentNode(this.node);
        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
        this.tree.currentNode = this;
        if (this.tree.expandOnClickNode) {
          this.handleExpandIconClick();
        }
        if (this.tree.checkOnClickNode && !this.node.disabled) {
          this.handleCheckChange(null, {
            target: { checked: !this.node.checked }
          });
        }
        this.tree.$emit('node-click', this.node.data, this.node, this);
}

如上所見：

  • 在開始和結(jié)束時，分別觸發(fā)current-change和node-click事件；
  • 當(dāng)prop expandOnClickNode（是否在點擊節(jié)點的時候展開或者收縮節(jié)點， 默認值為 true，如果為 false，則只有點箭頭圖標的時候才會展開或者收縮節(jié)點）為true時，會調(diào)用handleExpandIconClick觸發(fā)node-collapse或node-expand事件：
// tree-node.vue
handleExpandIconClick() {
        if (this.node.isLeaf) return;
        if (this.expanded) {
          this.tree.$emit('node-collapse', this.node.data, this.node, this);
          this.node.collapse(); // 會設(shè)置當(dāng)前node實例的expanded為false，導(dǎo)致一些class生效，子節(jié)點隱藏
        } else {
          this.node.expand(); // 會設(shè)置當(dāng)前node實例的expanded為true，觸發(fā)動態(tài)加載子節(jié)點回調(diào)并設(shè)置當(dāng)前節(jié)點和這些動態(tài)子節(jié)點的選中狀態(tài)等
          this.$emit('node-expand', this.node.data, this.node, this);
        }
}

其中，
this.node.collapse()會設(shè)置當(dāng)前node實例的expanded為false，導(dǎo)致一些class生效，子節(jié)點隱藏；
this.node.expand()會設(shè)置當(dāng)前node實例的expanded為true，觸發(fā)動態(tài)加載子節(jié)點回調(diào)并設(shè)置當(dāng)前節(jié)點和這些動態(tài)子節(jié)點的選中狀態(tài)等；
當(dāng)這些狀態(tài)性的標識（如半選狀態(tài)、勾選狀態(tài)和展開狀態(tài)，設(shè)置了watcher）變化時會觸發(fā)check-change事件；

  • 當(dāng)prop checkOnClickNode（是否在點擊節(jié)點的時候選中節(jié)點，默認值為 false，即只有在點擊復(fù)選框時才會選中節(jié)點）為true，會調(diào)用handleCheckChange觸發(fā)check事件：
// tree-node.vue
handleCheckChange(value, ev) {
        this.node.setChecked(ev.target.checked, !this.tree.checkStrictly); // 設(shè)置選中狀態(tài)，如勾選、半選
        this.$nextTick(() => {
          const store = this.tree.store;
          this.tree.$emit('check', this.node.data, {
            checkedNodes: store.getCheckedNodes(), // 目前被選中的節(jié)點所組成的數(shù)組
            checkedKeys: store.getCheckedKeys(), // 目前被選中的節(jié)點的 key 所組成的數(shù)組
            halfCheckedNodes: store.getHalfCheckedNodes(), // 目前半選中的節(jié)點所組成的數(shù)組
            halfCheckedKeys: store.getHalfCheckedKeys(), // 目前半選中的節(jié)點的 key 所組成的數(shù)組
          });
        });
}
  • 拖拽及相關(guān)的事件
    當(dāng)prop draggable設(shè)置成true后，節(jié)點可拖拽，接著綁定了四種事件：dragstart、dragover、dragend和drop。
// tree-node.vue
<div
    class="el-tree-node"
    @click.stop="handleClick"
    @contextmenu="($event) => this.handleContextMenu($event)"
    ......
    :draggable="tree.draggable"
    @dragstart.stop="handleDragStart"
    @dragover.stop="handleDragOver"
    @dragend.stop="handleDragEnd"
    @drop.stop="handleDrop"
    ref="node"
>

四個事件對應(yīng)的回調(diào)：

// tree-node.vue
      handleDragStart(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-start', event, this);
      },

      handleDragOver(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-over', event, this);
        event.preventDefault();
      },

      handleDrop(event) {
        event.preventDefault();
      },

      handleDragEnd(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-end', event, this);
      }

其中，this.tree是當(dāng)前實例的父節(jié)點實例，父節(jié)點實例（tree.vue文件中）有對應(yīng)的監(jiān)控方法：

// tree.vue
// 響應(yīng)tree-node-drag-start事件
this.$on('tree-node-drag-start', (event, treeNode) => { 
        if (typeof this.allowDrag === 'function' && !this.allowDrag(treeNode.node)) {
          event.preventDefault();
          return false;
        }
        event.dataTransfer.effectAllowed = 'move';
        ......
        dragState.draggingNode = treeNode;
        this.$emit('node-drag-start', treeNode.node, event); // 觸發(fā)node-drag-start事件
})

// tree.vue
// 響應(yīng)tree-node-drag-over事件
this.$on('tree-node-drag-over', (event, treeNode) => {
       ......
        event.dataTransfer.dropEffect = dropInner ? 'move' : 'none';
        if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
          if (oldDropNode) {
            this.$emit('node-drag-leave', draggingNode.node, oldDropNode.node, event); // 觸發(fā)node-drag-leave事件
          }
          this.$emit('node-drag-enter', draggingNode.node, dropNode.node, event); // 觸發(fā)node-drag-enter事件
        }

        if (dropPrev || dropInner || dropNext) {
          dragState.dropNode = dropNode;
        }
       ......
        dragState.showDropIndicator = dropType === 'before' || dropType === 'after';
        dragState.allowDrop = dragState.showDropIndicator || userAllowDropInner;
        dragState.dropType = dropType;
        this.$emit('node-drag-over', draggingNode.node, dropNode.node, event); // 觸發(fā)node-drag-over事件
})

// tree.vue
// 響應(yīng)tree-node-drag-end事件
this.$on('tree-node-drag-end', (event) => {
         ......
          this.$emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event); // 觸發(fā)node-drag-end事件
          if (dropType !== 'none') {
            this.$emit('node-drop', draggingNode.node, dropNode.node, dropType, event); // 觸發(fā)node-drop事件
          }
        }
        if (draggingNode && !dropNode) {
          this.$emit('node-drag-end', draggingNode.node, null, dropType, event); // 觸發(fā)node-drag-end事件
        }
        ......
})

DataTransfer參考：DataTransfer
這塊代碼精巧，需要理解對可拖拽元素及響應(yīng)事件，結(jié)合Node Class中insertBefore、insertAfter和insertChild方法，實現(xiàn)數(shù)據(jù)的交換。

  • 方向鍵操作
    在tree.vue的mounted方法里，注冊了keydown事件，使得：
    1.通過上下鍵可以選中節(jié)點
    2.左鍵實現(xiàn)收縮效果
    3.通過右鍵實現(xiàn)展開效果
    4.通過enter或space鍵實現(xiàn)多選框的選中/取消
// tree.vue
// keydown事件
handleKeydown(ev) {
        const currentItem = ev.target;
        if (currentItem.className.indexOf('el-tree-node') === -1) return;
        const keyCode = ev.keyCode;
        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
        const currentIndex = this.treeItemArray.indexOf(currentItem);
        let nextIndex;
        if ([38, 40].indexOf(keyCode) > -1) { // up、down
          ev.preventDefault();
          if (keyCode === 38) { // up
            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
          } else {
            nextIndex = (currentIndex < this.treeItemArray.length - 1) ? currentIndex + 1 : 0;
          }
          this.treeItemArray[nextIndex].focus(); // 選中
        }
        if ([37, 39].indexOf(keyCode) > -1) { // left、right 展開
          ev.preventDefault();
          currentItem.click(); // 選中
        }
        const hasInput = currentItem.querySelector('[type="checkbox"]');
        if ([13, 32].indexOf(keyCode) > -1 && hasInput) { // space enter選中checkbox
          ev.preventDefault();
          hasInput.click();
        }
}

5. ref方法

在tree.vue中對外以ref形式提供了18種方法進行豐富地操作。再次擺上下圖：

ElTree

ElTree以ref方式對外暴露的各種方法都在tree.vue中，而tree.vue都是調(diào)用的tree-store實例的對應(yīng)方法。
在此不一一介紹了，以兩個方法為例結(jié)束本篇。

  • getCheckedNodes

看下用法：

方法名 說明 參數(shù)
getCheckedNodes 若節(jié)點可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點所組成的數(shù)組 (leafOnly, includeHalfChecked) 接收兩個 boolean 類型的參數(shù)，1. 是否只是葉子節(jié)點，默認值為 false 2. 是否包含半選節(jié)點，默認值為 false

源碼：

// tree-store.js
getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
    const checkedNodes = [];
    const traverse = function(node) {
      const childNodes = node.root ? node.root.childNodes : node.childNodes;

      childNodes.forEach((child) => {
        if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) {
          checkedNodes.push(child.data);
        }

        traverse(child);
      });
    };

    traverse(this);

    return checkedNodes;
}

主要是一個遞歸的過程，將每層符合條件的節(jié)點保存返回。其中node.root為真表示是根節(jié)點實例，每個節(jié)點實例的子元素保存在childNodes中。

  • insertAfter

看下用法：

方法名 說明 參數(shù)
insertAfter 為 Tree 的一個節(jié)點的后面增加一個節(jié)點 (data, refNode) 接收兩個參數(shù)，1. 要增加的節(jié)點的 data 2. 要增加的節(jié)點的前一個節(jié)點的 data、key 或者 node

源碼：

// tree-store.js
getNode(data) {
    if (data instanceof Node) return data;
    const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);
    return this.nodesMap[key] || null;
}

insertAfter(data, refData) {
    const refNode = this.getNode(refData);
    refNode.parent.insertAfter({ data }, refNode);
}

// node.js
insertAfter(child, ref) {
    let index;
    if (ref) {
      index = this.childNodes.indexOf(ref);
      if (index !== -1) index += 1;
    }
    this.insertChild(child, index); // 更新數(shù)據(jù)的children信息，和實例的childNodes信息
}

getNode方法：
如果本身refData本身就是Node實例，那么直接返回該實例；
否則，通過nodesMap（treeStore實例維護的變量，用來保存Node實例）和key值獲取對應(yīng)的Node實例。
insertAfter方法：
refNode.parent獲取的是父節(jié)點實例，沒有Node實例都有parent屬性，用來指向父實例。
insertAfter目的是更新數(shù)據(jù)的children信息，和Node實例的childNodes信息。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容