vue项目使用element ui 树形组件tree遇到的问题

简单的不多说，主要根据下面这张图分析一下：

1.ref=‘tree’;如果你要使用tree组件内置的一些方法，比如说获取某个节点的方法，把哪些节点设为选中状态等方法，这些方法在methods里面是通过this.$ref.方法名来获取的，如果tree标签上不写这段代码，你是不会获取到的。

2.show-checkbox这个看文档就知道，是带勾选框的tree.

3.@check-changes  节点选中状态发生变化时的回调,共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点,重点说一下第二个参数：节点本身是否被选中 ，你可以根据它来判断你点击的节点的选中状态，某些功能例如你的功能需要给后台接口传递tree各节点的状态，你可以在这里来转化你当前所点击的节点的数据给接口所需要的参数。

4.@check当复选框被点击的时候触发,共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象:包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性. 

     这里说一下，@check-changes和@check我是配合的使用的，为了配合后台接口所需的参数，我需要从@check-changes里面取到第二个参数，来转化成我需要给后台的参数，还有重点说一下

上面这张图，当你勾选11时，@check-changes返回的第一个参数，data，它是返回了2遍，第一次返回的是11的节点对象返回数据，第二次返回的是它所关联的父节点的相关数据，这你就没法再某些环境下取值了，最好是你点哪个就获得哪个的data数据，这要好点儿，不过根据你们功能和后端相互配合做视情况而定。所以我后面用了@check的第一个参数data来取到我想要的数据，@check它第一个参数只会返回你当前点击的节点的信息，而不会返回它的父类或子类的data

5.：data  要展示的数据  是个数组，node-key，每个树节点用来作为唯一标识的属性，整棵树应该是唯一的，一般会选像每条数据的id这样的唯一性数据。

6.default-checked-keys  默认勾选的节点的 key 的数组，check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false

说一下这个check-strictly，当它为false时，它会严格的执行父子关系，比方说，严格的父子关系，当子类中有未被选中的项时，父类会出现半选中的状态，像上图那个蓝色横杠一样，表示父类中有子类为被选中，也就是说父类会有3个状态，勾选，未勾选，半勾选，而当check-strictly为true时，父类只会有勾选，未勾选2个状态。一般来说我们的功能模块都是严格执行父子功能的，无论从页面的美观还是逻辑上来考虑。

7.说一下default-checked-keys，它放默认选中的数组，例如，我页面请求数据返回数组，我node-key设置的是id,那么我的原始数组（：data）就是要把我从接口取回的所有的数据的id放进去。而default-checked-keys这个的数组，你要把符合选中状态的数据id放进去(比如说你通过原始数据中某个属性来判断是否为选状态，然后循环遍历取出符合条件的数据的id放进去)

8.注意，严格执行父子关系，就是当你父类选中时，即使子类未选中，那么父类下面的子类也会选中（尤其是页面上复选框的表现形式，当子类有未选中的，父类被选中了，子类表现出来的效果也是选中的），这样就要你自己写方法去判断和展示你的页面数据了。还有，比方说每条数据都有个isselect属性，我被勾中的数据isselect为true，未被勾中的为false,而当父类的isselect为null时才会显示半选中状态，而且是你的（:data数组里面的数据的父类为null）,如果是默认选中数据default-checked-keys这个数组的数据某个父类为null，那么没用，页面上表现的状况还是父类是全选中的状态而不是半选中。总结一下，你default-checked-keys里面的数据id来判断有没有选中，你（：data里的父类某个属性来显示全选、半选还是未勾选）。

转载于:https://juejin.im/post/5c2728d9e51d452aaa7c72b3