ant-design-vue cascader 級聯選擇動態加載省市區接口數據

使用 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"
/>

通過接口獲取數據，用於配置 cascader 組件的 options 可選數據源。

在接口返回的數據中，添加參數 isLeaf: false，動態加載數據時，才會觸發 loadData 方法，從而在 loadData 方法中請求下一級數據。

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

使用 load-data 實現動態加載配置。

async loadData (selectedOptions) {
    const targetOption = selectedOptions[selectedOptions.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 (selectedOptions) {
    ......
    targetOption.children = [...data].map(item => {
        item.isLeaf = (selectedOptions.length === this.deep) // deep 為指名數據的層級
        return item
    })
    ......
}

友情提示：targetOption 是 loadData 函數，動態加載項返回的，詳情請查看https://www.antdv.com/components/cascader-cn/ 中的動態加載選項案例。

如果在使用過程中遇到這類報錯，則需要將接口返回的數據進行格式化，把不需要的字段進行剔除，要跟field-names自定義的字段數量保持一致。

例如我所需的數據字段如下，那么就需要多加自定義兩個字段——id、jdAreaId

:field-names="{
  label: 'name',
  value: 'code',
  children: 'children',
	id: 'id',
	jdAreaId: 'jdAreaId',
}"