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自定义的字段数量保持一致。

例如我所需的数据字段如下,那么就需要多加自定义两个字段——idjdAreaId

:field-names="{
  label: 'name',
  value: 'code',
  children: 'children',
	id: 'id',
	jdAreaId: 'jdAreaId',
}"
posted @ 2021-10-14 14:43  AvenCheung  阅读(1924)  评论(0编辑  收藏  举报