问题:
el-cascader可以实现多选,但是在超过3层级的懒加载情况下,在没有加载最后一层内容是,点击选择框无法回显打input上并且change事件无法获取到值(下面的示例采用的是一个3层多选级联选择器)
原因:
由于这些层级是相关联的,所以,选中只会获取的子叶也就是最后一层的数据,这时候,最后一层也就是第三层没有数据,所以change获取到的才会如图所示,length为0.
解决:
一、我们可以通过在props中配置checkStrickly:true
取消父子级的关联
但是由于取消了父子级的关联,你无法选中父级的时候顺带选择子级,这样用户体验不太好,并且对后期change数据的处理很麻烦,我们不采用。
二、隐藏选择框
由于我的需求只有3层,只想要后面的车品牌能选中,所以我采用隐藏第一层选择框,这样就不会由于懒加载而导致change无法获取值和input回显的问题。
级联选择器中的popper-class属性可以给选择器添加一个class名,我们可以通过这个class去修改cascader的样式。代码如下:
<style lang="scss">
.disableFirstLevel{
.hn-cascader-menu:first-of-type{
.hn-checkbox{
display: none;
}
}
}
</style>
结果如下: