ant-design-vue cascader 级联选择动态加载省市区接口数据

通过接口获取数据，用于配置 cascader 组件的 options 可选数据源。

async mounted () {
    const data = await this.getRegion()
    this.options = data.map(item => {
        item.isLeaf = false
        return item
    })
}

在接口返回的数据中，添加参数 isLeaf: false，动态加载数据时，才会触发 loadData 方法，从而在 loadData 方法中请求下一级数据。

使用 antd 提供的 field-names 字段，用于自定义 options 中的 label、name、children 的字段。

<a-cascader
    v-model="form.delivery"
    :options="options"
    :load-data="loadData"
    :field-names="{
        label:'regionName',
        value:'code',
        children:'children'
    }"
    placeholder="请选择"
    @change="onChange"
/>

使用 load-data 实现动态加载配置。

async loadData (e) {
    const targetOption = e[e.length - 1]
    targetOption.loading = true
    const data = await this.getRegion(targetOption.code) // 接口调用
    targetOption.loading = false
    targetOption.children = [...data]
    this.options = [...this.options]
},

父级数据设置 isLeaf 为 false 之后，我们可以调用 loadData 方法来获取下一级的数据，将结果返回给 options 的 children 里。如果不设置 isLeaf 或者设置 isLeaf 为 true，都不会再次触发下一个数据请求。那么对于省市区三级地址数据请求，应该如何处理获取到区级数据呢？设置 isLeaf 为 false 即可。

async loadData (e) {
    ......
    targetOption.children = [...data].map(item => {
        item.isLeaf = (e.length === this.deep) // deep 为指名数据的层级
        return item
    })
    ......
}

change 事件为选择完成后的回调。

<!-- value: 选择值的数组，selectedOptions：选择值的数组对象 -->
onChange (value, selectedOptions) {
  console.log(value, selectedOptions)
},