element-UI tree 懒加载 勾选

        前端小白一枚，记录下今天弄了半天终于解决的小问题。

        使用tree，今天第一次使用这控件，花了一会时间终于完成相应的功能，唯独对后端传来值的数据，需要在tree中默认勾选翻了一车。

翻车经历：

        看了老久，el-tree中的load属性中的回调参数，node是当前load加载的节点，node中有childNodes，如图1-1所示。通过测试发现可以修改node.checked可以使当前node选中，于是我理所当然的觉得如果能对比后端的数据与当前node.data中的数据，如果相等就修改node.checked就能实现对应选项的勾选。

图1-1 展示childNodes

         但是因为load事件的加载level是0层开始，而真实的显示是从1层开始的，如图1-2所示。

图1-2 展示

 那么不是说我只要以下操作就可以修改选中状态了？？！

node.childNodes.forEach(item=>{

"伪代码："

item.data = 后端数据 && item.checked = true

})

然而如上的操作并不行，因为我测试了好久发现连循环都没进去，最后发现我学到现在很灵异（知识浅薄）的事情，那就是如图1-3所示。

图1-3 诡异事件

         明明能看到他具体childNodes的值，但是取不出来！我当时人都惊呆了，可能是我菜，基础知识不够，总而言之就是上面的路走不通了，最后弄了很久，最搞人的就是setCheckKeys，官方说是需要和node-key一起使用，而演示时使用了id字段，因为上面的逻辑把我限死了，我当时一直纠结childNodes，导致我以为官方演示中的id是node下的id，而非node.data.id，也就是resolve中放入的对象的id。如图1-4所示：

1-4 双id之我绕我自己

         因为这id混淆我（我是伞兵），所以我在测试的时候用的是node的id，在node-key中填的是data.id，好了现在展示正确的懒加载默认勾选。

        真正的实现：

        因为我百度了很久不知道是姿势不正确还是咋了，反正我没百度到懒加载如何默认勾选的内容，因此想给自己长个教训，也顺便记录下这次翻车。

        首先需要在el-tree中设置node-key，内容为load加载中resolve放入的数组对象的属性即可，如：

<el-tree :load="load" lazy :default-checked-keys="array" node-key="value"></el-tree>

后端数组 :

array = ['AAA','BBB']

load回调函数：

load(){

const data=[{

id：1，

value：‘AAA’

}，

{

id：2，

value：‘BBB’

}]

return resolve(data)

}

        在default-checked-keys中放入需要选择的数组，在node-key中放入node.data和default-checked-keys对应的属性名。就可以在懒加载中通过某个数组来使tree的某些节点默认选中了！