通过接口获取数据,用于配置 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)
},

 

Logo

前往低代码交流专区

更多推荐