el-tree组件使用插槽,插槽内checkbox处理问题

这两天组长给我一个需求,调取接口,返回的是一个嵌套的对象数组,要求做成树形结构

类似这种,给的设计图的checkbox是在右边.

我当时没想到修改样式的方法,就使用插槽自己写了个checkbox.

由此产生一系列问题,花费时间较多,所以记录一下.

首先是父子节点是否勾选问题 

后端的这个接口传回来的数据是全部名单,全部名单数据中,没有checked这个属性,通过递归进行添加checked属性.

然后怎么跟插槽内自己写的checkbox绑定呢.

查看elementui官方文档,发现有个node,node可以获得树节点.

通过函数打印node,发现node里面有个data属性,data属性就是当前节点绑定的数据.

checkbox绑定node.data.checked,

就可以实现checkbox的勾选

其次是父节点根据子节点更改勾选状态

前文提到node.data是当前节点绑定的数据.

打印node.data,可以看到父节点中有个children属性.children属性中就是所有子节点的data

但是这个只是静态的,无法在勾选的时候判断.el-checkbox中有个change方法,在更改勾选状态的时候执行的函数.

所以在checkbox中添加事件@change(node),将当前节点当做参数传入函数.