ant design vue级联选择懒加载省市区三级数据

项目中原先是展示的一级数据,后面根据需求改成精确到县的。

使用Cascader级联选择,后台返回的是获取省份的字典接口,根据codeValue一级级查询进行动态加载。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<a-form-model-item
prop="projectArea"
ref="projectArea"
:labelCol="{ span: 10 }"
:wrapperCol="{ span: 12 }"
label="项目部所在地:"
>
    <a-tooltip>
        <template slot="title"> 项目部所在地 </template>
        <a-cascader
            :allowClear="false"
            :options="projectAreaOptions"
            v-model="form1.projectArea"
            placeholder="请选择区域"
            :loadData="loadAreaData"
            @change="onAreaChange"
            :getPopupContainer="(trigger) => {return trigger.parentElement}">
        </a-cascader>
    </a-tooltip>
</a-form-model-item>

  

1
2
3
4
5
6
7
8
async mounted() {
        this.getAppendTemplate();
        const data = await this.getAreaList() || [];
        this.projectAreaOptions = data.map(item => {
            item.leaf = false;
            return item;
        })
 }

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//获取省份数据
getAreaList(code) {
    return new Promise((resolve, reject) => {
        code = -1;
        publicapi.findAllProvinceLazy(code).then(res => {
            if (res.options) {
                let arr = res.options.map(item => {
                    return {
                        value: item.id,
                        label: item.label,
                        isLeaf: item.leaf
                    }
                })
                return resolve(arr)
            } else {
                return resolve([])
            }
        }).catch((err) => {
            return reject(err)
        })
    })
},
//获取下一级数据
async loadAreaData(selectedOptions) {           
    if (!this.projectAreaOptions.length) {
        this.projectAreaOptions = await this.getAreaList() || [];
    } else {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        const data = await publicapi.findAllProvinceLazy(targetOption.value);
        console.log(data, 'targetOption.value', targetOption.value);
        if (data.options.length) {
            for (let index = 0; index < data.options.length; index ++) {
                const element = data.options[index];
                if (element.children) { delete  element.children }
                element.value = element.id;
                element.isLeaf = false;
            }
            targetOption.loading = false;
            targetOption.children = [...data.options];                   
            this.projectAreaOptions = JSON.parse( JSON.stringify(this.projectAreaOptions) );
        } else {
            targetOption.loading = false;
            targetOption.isLeaf = true;
        }
    }
},
//选择区域后的操作
onAreaChange(val, selectedOptions) {
    console.log(val, selectedOptions, 'val, selectedOptions')
},

  

非懒加载的级联,后台一次性返回所有数据机构

1
2
3
4
5
6
7
8
<a-cascader
      :options="projectAreaOptions"
      v-model="form1.projectArea"
      placeholder="请选择区域"
      @change="onAreaChange"
      :field-names="{label: 'label', value: 'id', children: 'children'}"
      :getPopupContainer="(trigger) => {return trigger.parentElement}"
/>

使用fieldNames自定义options 中 label name children 的字段

后台返回的数据

 

 

 

posted @   紫诺花开  阅读(3046)  评论(2编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示