cube-ui 地址选择器

由于省市区是后台传的，所以不能直接赋值

<template>
  <div>
      <cube-button @click="showAsyncPicker">Async Load Data</cube-button>
  </div>
</template>

<script>
import baseUrl from '../assets/api/baseUrl' 
import qs from 'qs'
export default {
    data(){
        return{
            asyncData:[],
            provinceList:[],
            asyncSelectedIndex:[0, 0, 0]
        }
    },
  mounted () {
         this.$axios.post(baseUrl+'/getDict.do?name=Province').then(res=>{
            let data=res.data.result
            if(data.code!=0){
                this.$router.push({path:'/'})
            }
            this.asyncData=JSON.parse(data.res.replace(/Code/g,'value').replace(/Name/g,'text'));
            this.getCity(this.asyncData[0].value).then(res=>{
                 this.asyncData[0].children=res
                 this.getCountry(this.asyncData[0].children[0].value).then(rese=>{
                    this.asyncData[0].children[0].children=rese
                     this.asyncPicker = this.$createCascadePicker({
                        title: '请选择地址',
                        async: true,
                        data: this.asyncData,
                        selectedIndex: this.asyncSelectedIndex.slice(),
                        onSelect: this.selectHandle,
                        onCancel: this.cancelHandle,
                        onChange: this.asyncChangeHandle
                    })
                })
            })
        })
  },
  methods: {
    showAsyncPicker() {
      this.asyncPicker.show()
    },
    asyncChangeHandle(i, newIndex) {
      if (newIndex !== this.asyncSelectedIndex[i]) {
        this.asyncSelectedIndex[i] = newIndex
        // If the first two column is changed, request the data for rest columns.
        if (i < 2) {
          // Mock async load.
          setTimeout(() => {
            if (i === 0) {
              const current = this.asyncData[newIndex]
              this.getCity(current.value).then(res=>{
                    current.children = current.children || res
                    this.getCountry(current.children[0].value).then(rese=>{
                        current.children[0].children = current.children[0].children || rese
                        this.asyncSelectedIndex[1] = 0
                        this.asyncSelectedIndex[2] = 0
                        this.asyncPicker.setData(this.asyncData, this.asyncSelectedIndex)
                    })
              })
             
            }

            if (i === 1) {
              const current = this.asyncData[this.asyncSelectedIndex[0]].children[newIndex]
               this.getCountry(current.value).then(rese=>{
                    current.children = current.children || rese
                    this.asyncSelectedIndex[2] = 0
                    this.asyncPicker.setData(this.asyncData, this.asyncSelectedIndex)
               })
            }      
          }, 100)
        }
      }
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
      this.$createDialog({
        type: 'warn',
        content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
        icon: 'cubeic-alert'
      }).show()
    },
    cancelHandle() {
      this.$createToast({
        type: 'correct',
        txt: 'Picker canceled',
        time: 1000
      }).show()
    },
   //根据省获得市
    async getCity(province){
        let arr=[]
        await  this.$axios.post(baseUrl+'/city2.do',qs.stringify({
             provinceCode:province
        })).then(res=>{
            let data=res.data.result
            arr=JSON.parse(data.res.replace(/Code/g,'value').replace(/Name/g,'text'))
        })
        return arr
       
    },
//根绝市获得区
    async getCountry(city){
        let arr=[]
        await  this.$axios.post(baseUrl+'/county2.do',qs.stringify({
             cityCode:city
        })).then(res=>{
            let data=res.data.result
            arr=JSON.parse(data.res.replace(/CountyCode/g,'value').replace(/CountyName/g,'text'))
        })
        return arr
    }
  }
}
</script>

<style>

</style>