在element-plus 2.1.8
中出现了一个新组件——TreeSelect
。简单来说就是ElTree
和ElSelect
的结合体:
不过最近时使用发现,ElTreeSelect
如果你只是需要得到选中的值,那它的表现是十分正常的:
但是有时候我们需要获得半选
的值,那我们就得用到ElTreeSelect
的check事件,此时我们加上check
事件,而handleCheck
的代码如下:
把halfCheckKeys
放到模板当中后,我们会发现,它的值只是会在第一次选中的时候显示正常,第二次就开始不正常了:
当然解决这个问题其实也非常简单,我们可以通过嵌套setTimeout
和使用ElTreeSelect
的实例方法
来解决这个问题:
当然为啥这种方式能解决这个问题,那就得看它的源码了,实际上ElTreeSelect
的源码只是简单的将ElTree
和ElSelect
结合了起来
所以这里就涉及到一个问题,
怎么把 ElTree的选中值,ElSelect的modelValue,当前组件的modelValue
这个三个值保持一致。
首先它重写了onCheck
方法,在这里会让modelValue
更新到正确的选中值:
当然modelValue
实际上是直接赋值给了ElSelect
,所以此时当前组件的modelValue = ElSelect的modelValue
,然后就是怎么同步ElTree的选中
了,实际上它只是简单的监听了modelValue
的值,然后通过调用ElTree
的setCheckedKeys
简单的同步了一下选中:
所以说,我们是无法通过
check
方法拿到即时的半选值
的,因为它返回的是当时的半选值
,而不是同步后
的:
所以我们
只要在watch
执行完成之后再去拿就行了,当然watch
本身是微异步
,所以我们可以套一层setTimeout
来实现这个目标。
总结
本身的问题是由于执行顺序
的问题,当然目前来说,如果要在源码层面改正这个问题,还是有点困难的,因为这牵扯到ElTree
和ElSelect
。