ant-design-vue cascader 级联选择动态加载省市区接口数据
通过接口获取数据,用于配置 cascader 组件的options 可选数据源。async mounted () {const data = await this.getRegion()this.options = data.map(item => {item.isLeaf = falsereturn item})}在接口返回的数据中,添加参数 isLeaf: false,动态加载数据时,才
·
通过接口获取数据,用于配置 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)
},
更多推荐
已为社区贡献60条内容
所有评论(0)