Cascader support loadData async
This commit is contained in:
parent
13a940ee86
commit
f7ffdac569
4 changed files with 71 additions and 15 deletions
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<div style="width: 300px;margin: 100px;">
|
||||
<Cascader :data="data2" v-model="v1" change-on-select></Cascader>
|
||||
</div>
|
||||
<Row>
|
||||
<i-col span="4">
|
||||
<Button @click="handleLoad">load</Button>
|
||||
</i-col>
|
||||
<i-col span="6">
|
||||
<!--<Cascader :data="data2" v-model="v1" change-on-select></Cascader>-->
|
||||
<Cascader :data="data2" v-model="v1" :loadData="loadData"></Cascader>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
v1: ['zhejiang'],
|
||||
v1: [],
|
||||
data2: [{
|
||||
value: 'zhejiang',
|
||||
label: '浙江',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: '杭州',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: '西湖'
|
||||
}]
|
||||
}]
|
||||
children: [],
|
||||
loading: false
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: '江苏',
|
||||
|
@ -32,6 +32,35 @@
|
|||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLoad () {
|
||||
this.data2[0].loading = !this.data2[0].loading;
|
||||
},
|
||||
loadData (item, cb) {
|
||||
item.loading = true;
|
||||
setTimeout(() => {
|
||||
if (item.value === 'zhejiang') {
|
||||
item.children = [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州',
|
||||
loading: false,
|
||||
children: []
|
||||
}
|
||||
];
|
||||
} else if (item.value === 'hangzhou') {
|
||||
item.children = [
|
||||
{
|
||||
value: 'ali',
|
||||
label: '阿里巴巴'
|
||||
}
|
||||
];
|
||||
}
|
||||
item.loading = false;
|
||||
cb();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue