iview 级联选择组件_iView Cascader级联选择器

使用iView的Cascader级联选择器时，遇到了change-on-select相关问题。

当然Cascader是动态方式加载选项的。

change-on-select: true，初始值只能设置第一级

废话不多说，上栗子iView Cascader change-on-select为true问题，当然在实际应用中，肯定是有设置初始值的情况的，所以需要找到相关解决方案。

官网注解：change-on-select 当此项为 true 时，点选每级菜单选项值都会发生变化

change-on-select: false，可以设置初始值

既然change-on-select为true时有问题，那么change-on-select设置为false呢？

iView Cascader change-on-select为false问题

初始值可以设置了，很棒，有个缺点就是无法点击菜单选项，值就直接生效。

如果既想设置初始值，又想每次点击菜单选项值都发生变化呢？有没有解决方案？！

当然，是有的。

既设置初始值，又能够点击菜单选项值发生变化

怎么做呢？

答：动态的更改change-on-select咯，且通过on-visible-change事件。iView Cascader 既能设置初始值，又能点击菜单选项值变化

on-visible-change 展开和关闭弹窗时触发 显示状态，Boolean

:change-on-select="changeOnSelect"

@on-visible-change="handleChangeOnSelect">

/**

* 动态设置change-on-select的值

* 当级联选择器弹窗展开时，设置change-on-select为true，即可以点选菜单选项值发生变化

* 当级联选择器弹窗关闭时，设置change-on-select为false，即能够设置初始值

*/

handleChangeOnSelect (value) {

this.changeOnSelect = value

}

(完)