說(shuō)明：以下基于elementUI@2.13.1。

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

ElTree

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

• 通過(guò)入口tree.vue文件，了解到驶冒，模板生成這塊苟翻，主要是通過(guò)tree-node.vue來(lái)生成樹(shù)形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)
• 除了默認(rèn)方式，節(jié)點(diǎn)內(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)部通過(guò)Node Class維護(hù)了一份樹(shù)形結(jié)構(gòu)

在elTreede 入口vue文件tree.vue中骗污，會(huì)通過(guò)TreeStore Class生成store對(duì)象：

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的實(shí)例store會(huì)根據(jù)節(jié)點(diǎn)數(shù)據(jù)初始化節(jié)點(diǎn)崇猫，生成node，見(jiàn)下一節(jié)“節(jié)點(diǎn)初始化過(guò)程”需忿；

this.root = new Node({ // this.root保存著根節(jié)點(diǎn)信息
      data: this.data,
      store: this
});

• tree-store中nodeMap對(duì)象以{key: node}形式保存node诅炉；
• 在下一節(jié)中我們會(huì)了解到蜡歹，當(dāng)設(shè)置了lazy懶加載，那么就不會(huì)遍歷子節(jié)點(diǎn)數(shù)據(jù)進(jìn)行初始化涕烧，所以需要在tree-store的最后調(diào)用load回調(diào)季稳，遍歷子節(jié)點(diǎn)數(shù)據(jù)進(jìn)行初始化，遞歸地方式將所有節(jié)點(diǎn)初始化澈魄。

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（默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組）來(lái)設(shè)置各級(jí)節(jié)點(diǎn)的選中狀態(tài)景鼠。

3. 節(jié)點(diǎn)初始化過(guò)程（Node Class實(shí)例化）

節(jié)點(diǎn)初始化用到Node Class來(lái)實(shí)例化，是一個(gè)遞歸的過(guò)程痹扇，會(huì)根據(jù)節(jié)點(diǎn)數(shù)據(jù)及其后代數(shù)據(jù)逐步用Node Class封裝铛漓，其主要作用是封裝每層節(jié)點(diǎn)的各種狀態(tài)和各種操作，在此處用Class是非常適合的鲫构；其初始化主要過(guò)程有：

• 將node以{key: node}形式注冊(cè)到store中的nodeMap對(duì)象浓恶；
• 通過(guò)level屬性來(lái)設(shè)置不能節(jié)點(diǎn)的層級(jí)；
• 通過(guò)childNodes來(lái)保存子節(jié)點(diǎn)Node Class實(shí)例结笨，而在對(duì)應(yīng)的節(jié)點(diǎn)數(shù)據(jù)中是用children（也可以自定義）來(lái)保存子節(jié)點(diǎn)數(shù)據(jù);
• 實(shí)例中通過(guò)data來(lái)保存原始的數(shù)據(jù)包晰；
• 通過(guò)checked和indeterminate來(lái)設(shè)置選中狀態(tài)，通過(guò)expanded和visible來(lái)設(shè)置展開(kāi)和可見(jiàn)狀態(tài)炕吸，通過(guò)isCurrent來(lái)設(shè)置是否是選中節(jié)點(diǎn)伐憾，通過(guò)loading和loaded來(lái)設(shè)置加載狀態(tài)；
• 根據(jù)el-tree的props屬性中的isLeaf赫模，設(shè)置node的isLeafByUser屬性树肃；
• 根據(jù)defaultExpandAll，設(shè)置節(jié)點(diǎn)expanded;
• 通過(guò)setData方法瀑罗，遍歷children胸嘴，生成Node實(shí)例，插入到node的childNodes中斩祭；
  詳細(xì)流程見(jiàn)下圖：
  
  節(jié)點(diǎn)初始化
  
  lazy加載示例：

<el-tree
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>

<script>
loadNode(node, resolve) {
  resolve([{id: 1}]) // 在內(nèi)部會(huì)將數(shù)組中的元素用Node實(shí)例化劣像，并注入到當(dāng)前節(jié)點(diǎn)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實(shí)例化并插入到當(dāng)前節(jié)點(diǎn)的node

        this.updateLeafState(); // 更新節(jié)點(diǎn)葉子狀態(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. 事件機(jī)制與拖拽

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

click

// 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àn)：

• 在開(kāi)始和結(jié)束時(shí)掠拳，分別觸發(fā)current-change和node-click事件癞揉；
• 當(dāng)prop expandOnClickNode（是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開(kāi)或者收縮節(jié)點(diǎn)， 默認(rèn)值為 true，如果為 false喊熟，則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會(huì)展開(kāi)或者收縮節(jié)點(diǎn)）為true時(shí)柏肪，會(huì)調(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(); // 會(huì)設(shè)置當(dāng)前node實(shí)例的expanded為false，導(dǎo)致一些class生效芥牌，子節(jié)點(diǎn)隱藏
        } else {
          this.node.expand(); // 會(huì)設(shè)置當(dāng)前node實(shí)例的expanded為true烦味，觸發(fā)動(dòng)態(tài)加載子節(jié)點(diǎn)回調(diào)并設(shè)置當(dāng)前節(jié)點(diǎn)和這些動(dòng)態(tài)子節(jié)點(diǎn)的選中狀態(tài)等
          this.$emit('node-expand', this.node.data, this.node, this);
        }
}

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

• 當(dāng)prop checkOnClickNode（是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候選中節(jié)點(diǎn)，默認(rèn)值為 false辆苔，即只有在點(diǎn)擊復(fù)選框時(shí)才會(huì)選中節(jié)點(diǎn)）為true算灸，會(huì)調(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é)點(diǎn)所組成的數(shù)組
            checkedKeys: store.getCheckedKeys(), // 目前被選中的節(jié)點(diǎn)的 key 所組成的數(shù)組
            halfCheckedNodes: store.getHalfCheckedNodes(), // 目前半選中的節(jié)點(diǎn)所組成的數(shù)組
            halfCheckedKeys: store.getHalfCheckedKeys(), // 目前半選中的節(jié)點(diǎn)的 key 所組成的數(shù)組
          });
        });
}

• 拖拽及相關(guān)的事件
  當(dāng)prop draggable設(shè)置成true后乎婿，節(jié)點(diǎn)可拖拽，接著綁定了四種事件：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"
>

四個(gè)事件對(duì)應(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)前實(shí)例的父節(jié)點(diǎn)實(shí)例森逮，父節(jié)點(diǎn)實(shí)例（tree.vue文件中）有對(duì)應(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
這塊代碼精巧败潦，需要理解對(duì)可拖拽元素及響應(yīng)事件沼填，結(jié)合Node Class中insertBefore、insertAfter和insertChild方法姨伟，實(shí)現(xiàn)數(shù)據(jù)的交換谊迄。

• 方向鍵操作
  在tree.vue的mounted方法里闷供，注冊(cè)了keydown事件，使得：
  1.通過(guò)上下鍵可以選中節(jié)點(diǎn)
  2.左鍵實(shí)現(xiàn)收縮效果
  3.通過(guò)右鍵實(shí)現(xiàn)展開(kāi)效果
  4.通過(guò)enter或space鍵實(shí)現(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 展開(kāi)
          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中對(duì)外以ref形式提供了18種方法進(jìn)行豐富地操作。再次擺上下圖：

ElTree

• getCheckedNodes

看下用法：

源碼：

// 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;
}

主要是一個(gè)遞歸的過(guò)程飘弧，將每層符合條件的節(jié)點(diǎn)保存返回。其中node.root為真表示是根節(jié)點(diǎn)實(shí)例砚著，每個(gè)節(jié)點(diǎn)實(shí)例的子元素保存在childNodes中眯牧。

• insertAfter

看下用法：

源碼：

// 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信息学少，和實(shí)例的childNodes信息
}

getNode方法：
如果本身refData本身就是Node實(shí)例，那么直接返回該實(shí)例秧骑；
否則版确，通過(guò)nodesMap（treeStore實(shí)例維護(hù)的變量，用來(lái)保存Node實(shí)例）和key值獲取對(duì)應(yīng)的Node實(shí)例乎折。
insertAfter方法：
refNode.parent獲取的是父節(jié)點(diǎn)實(shí)例绒疗，沒(méi)有Node實(shí)例都有parent屬性，用來(lái)指向父實(shí)例骂澄。
insertAfter目的是更新數(shù)據(jù)的children信息吓蘑，和Node實(shí)例的childNodes信息。