使用iView的Cascader級(jí)聯(lián)選擇器時(shí),遇到了change-on-select相關(guān)問題
式曲。
當(dāng)然Cascader是動(dòng)態(tài)方式加載選項(xiàng)的。
change-on-select: true
,初始值只能設(shè)置第一級(jí)
廢話不多說祥楣,上栗子iView Cascader change-on-select為true
問題,當(dāng)然在實(shí)際應(yīng)用中汉柒,肯定是有設(shè)置初始值的情況的误褪,所以需要找到相關(guān)解決方案。
官網(wǎng)注解:change-on-select 當(dāng)此項(xiàng)為 true 時(shí)碾褂,點(diǎn)選每級(jí)菜單選項(xiàng)值都會(huì)發(fā)生變化
change-on-select: false
兽间,可以設(shè)置初始值
既然change-on-select為true時(shí)有問題,那么change-on-select設(shè)置為false
呢正塌?
iView Cascader change-on-select為false問題
初始值可以設(shè)置了嘀略,很棒,有個(gè)缺點(diǎn)就是無法點(diǎn)擊菜單選項(xiàng)乓诽,值就直接生效帜羊。
如果既想設(shè)置初始值,又想每次點(diǎn)擊菜單選項(xiàng)值都發(fā)生變化呢鸠天?有沒有解決方案讼育?!
當(dāng)然稠集,是有的奶段。
既設(shè)置初始值,又能夠點(diǎn)擊菜單選項(xiàng)值發(fā)生變化
怎么做呢剥纷?
答:動(dòng)態(tài)的更改change-on-select咯痹籍,且通過on-visible-change
事件。iView Cascader 既能設(shè)置初始值晦鞋,又能點(diǎn)擊菜單選項(xiàng)值變化
on-visible-change 展開和關(guān)閉彈窗時(shí)觸發(fā) 顯示狀態(tài)蹲缠,Boolean
<!- 增加on-visible-change事件 -->
<cascader :data="data4" :load-data="loadData" v-model="value2"
:change-on-select="changeOnSelect"
@on-visible-change="handleChangeOnSelect">
</cascader>
/**
* 動(dòng)態(tài)設(shè)置change-on-select的值
* 當(dāng)級(jí)聯(lián)選擇器彈窗展開時(shí),設(shè)置change-on-select為true悠垛,即可以點(diǎn)選菜單選項(xiàng)值發(fā)生變化
* 當(dāng)級(jí)聯(lián)選擇器彈窗關(guān)閉時(shí)线定,設(shè)置change-on-select為false,即能夠設(shè)置初始值
*/
handleChangeOnSelect (value) {
this.changeOnSelect = value
}
(完)