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

最新推荐文章于 2024-07-23 17:35:39 发布

weixin_34029680

最新推荐文章于 2024-07-23 17:35:39 发布

阅读量7.4k

点赞数 1

文章标签： javascript ui 后端 ViewUI

原文链接：https://juejin.im/post/5c2728d9e51d452aaa7c72b3

版权

本文详细介绍了在Vue项目中使用Element UI Tree组件时可能会遇到的问题和解决方法，包括ref的使用、show-checkbox属性、@check-changes与@check事件、data和node-key的设置、check-strictly属性的逻辑以及default-checked-keys的处理，特别是父子关系的严格模式下如何处理选中状态。

摘要由CSDN通过智能技术生成

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

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࿰