element-ui tree懶加載時獲取節點DOM

tree提供的方法貌似沒有能夠直接獲取節點DOM，或者點擊勾選節點響應函數參數node其實只是傳入data的數據對象，拿不到DOM，得想一想法子來獲取之

---

事情是這樣的：最近作一個表單，要能勾選一個二級的下拉數據，因而就想起了element的tree組件，並且二級的數據是要調用接口懶加載展開的，這個應該不少人會遇到這種需求，tree組件即支持勾選框又支持懶加載節點，功能是夠用的。

因此起初我是這樣用組件的：

<el-tree
:data="exitDataOnlyFirst"
:props="{label: 'name'}"
:load="loadNode"
node-key="code"
:expand-on-click-node="true"
:default-checked-keys="form.checkedKeysSecond"
lazy
ref="dataTree"
show-checkbox>
</el-tree>

注： 個人展現數據大概樣子以下：

data = [
{code: 1, name: '一', children: [{code: 11, name:'11'}]}
]

不過，在作編輯修改的時候，遇到這個組件就有點小困難了，雖然它有支持默認勾選節點的屬性配置default-checked-keys，不過問題頁面第一次加載這個組件的時候，通常來講我只加載第一級的數據，不加載第二級，儘管只要checked-keys設置的匹配，點擊第一級展開以後，第二級只要一匹配上就會自動勾選，但顯然這多一步的操做無疑不符合正常交互流程也不是很好體驗，那隻能考慮更直觀點的操做了，那就是要能默認展開已經被選的第一級數據下的第二級數據，並勾選上相關節點。

expand-on-click-node通常支持除勾選框外的節點部分點擊後展開子節點。

如今要優化的幾個點是：

1. 勾選未展開子節點的一級節點時，可以同時展開二級節點，並勾選上全部
2. 組件初始化展現data數據時，能展開已經被勾選過的二級節點

針對第一點，其實只要解決勾選一級節點觸發展開子節點便可，勾選全部，組件已經實現了的，但上面我也提到過了expand-on-click-node通常支持除勾選框外的節點部分點擊纔會觸發展開，勾選框只負責勾選功能，那怎麼讓它也觸發展開呢，這個時候就須要用到@check-change響應了，

<el-tree
:data="exitDataOnlyFirst"
:props="{label: 'name'}"
:load="loadNode"
node-key="code"
:expand-on-click-node="true"
:default-checked-keys="form.checkedKeysSecond"
lazy
@check-change="treeCheck"
ref="dataTree"
show-checkbox>
</el-tree>

響應函數這麼寫：

treeCheck(currentData, isCheck) {
    //if (currentData.leaf) return
    if (!currentData.children.length  &&  isCheck) {
        // 點擊這個data對應的節點的展開圖標
        const  currentCode  =  currentData.code
        const  $current  = Array.from(this.$refs.dataTree.$children).filter($child  => {return  $child.node.data.code  ===  currentCode
    })[0]
        $current.$el.childNodes[0].childNodes[0].click()
    }
}

利用第二個參數isCheck獲悉到勾選節點是將其選中，同時該節點尚未children，可做爲還未展開過的依據，此時要是check-chage能提供當前節點的dom或者有展開功能函數提供就行了，然而並無，和同事交流的時候還說要修改源碼，有點大費周章的感受，不過好在查看了整個tree的ref，發現$childrens這個屬性，進而發現其node.data恰好是傳入的data對象對應的數據，所以，能夠利用數據遍歷和過濾的方式來一步一步找到對應的dom，只要找到 展開箭頭 的圖標dom，再手動click一下，就解決了~

有了第一點獲取節點dom和對應展開圖標dom的經驗後，第二點就很好作了，正如一早提到的default-checked-keys告知了組件只要有出現這些key就勾選上，因而第二點的方案就能夠定位到 解決展開那些有被勾選中子節點的一級節點上，而後經過遍歷和匹配數據獲取對應的dom，在手動click展開圖標便可，剩下的加載操做，讓組件幫你完成。

總結一下tree的幾個關鍵屬性：

1. data: 初始化時傳入做爲第一級節點數據
2. load: 懶加載觸發的函數，和lazy搭配
3. expand-on-click: 點擊節點觸發展開或者收起子節點
4. default-checked-keys: 告訴組件要默認勾選中的節點的key數組
5. check-change: 節點選中狀態發生變化時的回調
6. show-checkbox: 顯示節點勾選框
7. ref: 用來獲取tree組件的實例和dom

當發現組件api不夠用的時候，只要想法設法完成功能，須要用到dom的時候，還須要多多觀察。