element-plus的tree-select如何正确获得半选节点

1,240 阅读2分钟

image.png

element-plus 2.1.8中出现了一个新组件——TreeSelect。简单来说就是ElTreeElSelect的结合体:

image.png

不过最近时使用发现,ElTreeSelect如果你只是需要得到选中的值,那它的表现是十分正常的:

5.gif

但是有时候我们需要获得半选的值,那我们就得用到ElTreeSelectcheck事件,此时我们加上check事件,而handleCheck的代码如下:

image.png

halfCheckKeys放到模板当中后,我们会发现,它的值只是会在第一次选中的时候显示正常,第二次就开始不正常了:

6.gif

当然解决这个问题其实也非常简单,我们可以通过嵌套setTimeout和使用ElTreeSelect实例方法来解决这个问题:

image.png

7.gif

当然为啥这种方式能解决这个问题,那就得看它的源码了,实际上ElTreeSelect的源码只是简单的将ElTreeElSelect结合了起来

image.png 所以这里就涉及到一个问题,怎么把 ElTree的选中值,ElSelect的modelValue,当前组件的modelValue这个三个值保持一致。 首先它重写了onCheck方法,在这里会让modelValue更新到正确的选中值:

image.png

当然modelValue实际上是直接赋值给了ElSelect,所以此时当前组件的modelValue = ElSelect的modelValue,然后就是怎么同步ElTree的选中了,实际上它只是简单的监听了modelValue的值,然后通过调用ElTreesetCheckedKeys简单的同步了一下选中:

image.png 所以说,我们是无法通过check方法拿到即时的半选值的,因为它返回的是当时的半选值,而不是同步后的:

image.png

所以我们只要在watch执行完成之后再去拿就行了,当然watch本身是微异步,所以我们可以套一层setTimeout来实现这个目标。

总结

本身的问题是由于执行顺序的问题,当然目前来说,如果要在源码层面改正这个问题,还是有点困难的,因为这牵扯到ElTreeElSelect