diff --git a/example/pages/cascade-picker.vue b/example/pages/cascade-picker.vue
index 150cd36b1c69a7f53eef7ceed94ec5299eb639cd..e35f3d47895eb341bc9e935528b6760fae1c2cc2 100644
--- a/example/pages/cascade-picker.vue
+++ b/example/pages/cascade-picker.vue
@@ -5,6 +5,7 @@
Cascade Picker
City Picker
Set Data
+ Async Cascade
@@ -16,7 +17,7 @@
import { provinceList, cityList, areaList } from 'example/data/area'
import { cascadeData } from 'example/data/cascade'
- const cityData = provinceList
+ const cityData = provinceList.slice()
cityData.forEach(province => {
province.children = cityList[province.value]
province.children.forEach(city => {
@@ -24,6 +25,11 @@
})
})
+ const asyncData = provinceList.slice()
+ const asyncSelectedIndex = [0, 0, 0]
+ asyncData[0].children = cityList[asyncData[0].value]
+ asyncData[0].children[0].children = areaList[asyncData[0].children[0].value]
+
export default {
mounted() {
this.cascadePicker = this.$createCascadePicker({
@@ -51,6 +57,34 @@
onSelect: this.selectHandle,
onCancel: this.cancelHandle
})
+
+ this.asyncPicker = this.$createCascadePicker({
+ title: 'Async Cascade',
+ async: true,
+ data: asyncData,
+ selectedIndex: asyncSelectedIndex.slice(),
+ onSelect: this.selectHandle,
+ onCancel: this.cancelHandle,
+ onChange: (i, newIndex) => {
+ if (newIndex !== asyncSelectedIndex[i]) {
+ asyncSelectedIndex.splice(i, 1, newIndex)
+ if (i < 2) {
+ setTimeout(() => {
+ if (i === 0) {
+ const current = asyncData[newIndex]
+ current.children = current.children || cityList[current.value]
+ }
+
+ if (i === 1) {
+ const current = asyncData[asyncSelectedIndex[0]].children[newIndex]
+ current.children = current.children || areaList[current.value]
+ }
+ this.asyncPicker.setData(asyncData, asyncSelectedIndex)
+ }, 500)
+ }
+ }
+ }
+ })
},
methods: {
showCascadePicker() {
@@ -69,6 +103,9 @@
this.setDataPicker.setData(cityData, [1, 1, 0])
}, 1000)
},
+ showAsyncPicker() {
+ this.asyncPicker.show()
+ },
selectHandle(selectedVal, selectedIndex, selectedText) {
this.$createDialog({
type: 'warn',
diff --git a/src/components/cascade-picker/cascade-picker.vue b/src/components/cascade-picker/cascade-picker.vue
index 2b6a5694ce6167e3e907cf31521cb81a3755f2f4..c4c06f0c65634ff3fcb7a1ef5daa18e58c7389cf 100644
--- a/src/components/cascade-picker/cascade-picker.vue
+++ b/src/components/cascade-picker/cascade-picker.vue
@@ -1,18 +1,20 @@
+ ref="picker"
+ v-model="isVisible"
+ :data="pickerData"
+ :selected-index="pickerSelectedIndex"
+ :pending="pending"
+ :title="title"
+ :subtitle="subtitle"
+ :z-index="zIndex"
+ :cancel-txt="cancelTxt"
+ :confirm-txt="confirmTxt"
+ :swipe-time="swipeTime"
+ @select="_pickerSelect"
+ @cancel="_pickerCancel"
+ @change="_pickerChange">
+