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',
}"