iview Cascader使用动态加载选项时设置默认值
原文章链接地址:https://codepen.io/02954/pen/MzMMYwHTML<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/iview/dist/iview.min.js"></script><div id="...
·
原文章链接地址:https://codepen.io/02954/pen/MzMMYw
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
<div>
<h4>iView Cascader 既能设置初始值,又能点击菜单选项值变化</h4>
<p>change-on-select当然得设置,且必须动态的设置</p>
</div>
<br />
<p></p>
<cascader :data="data4" :load-data="loadData" :change-on-select="changeOnSelect" v-model="value2" @on-visible-change="handleChangeOnSelect"></cascader>
<br />
</div>
JS
var Main = {
data () {
return {
value2: ['beijing', 'baidu'],
changeOnSelect: false,
data4: [
{
value: 'beijing',
label: '北京',
children: [],
loading: false
},
{
value: 'hangzhou',
label: '杭州',
children: [],
loading:false
}
]
}
},
methods: {
loadData (item, callback) {
item.loading = true;
setTimeout(() => {
if (item.value === 'beijing') {
item.children = [
{
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
callback();
}, 1000);
},
handleChangeOnSelect (value) {
this.changeOnSelect = value
}
}
}
var Component = Vue.extend(Main)
new Component().$mount('#app')
更多推荐
已为社区贡献32条内容
所有评论(0)