2021-10-21

前端使用elementui的级联选择器去显示省市区
界面展示
2021-10-21
修改回显:
2021-10-21

代码:

  <el-form-item label="收货地址" prop="address">
                            <el-cascader
                                v-model="formInline.selectedOptions"
                                :options="cityInfo"
                                @change="handleChange" style="width: 300px">
                            </el-cascader>
                            <el-input v-model="formInline.address" placeholder="请输入详细地址" style="width: 300px;margin-left: 10px"></el-input>
                            </el-form-item>

具体实现:
1:引入一个省市区的json文件,格式和el-cascader中要的格式一致,这里以展示广东省的省市区县的数据为例,因为json文件过大这里就不展示了。但是所有省市区的数据要定义在一个数组里面

   {
        'label': '广东省',
        'value': '广东省',
        'provinceCode': '510000',
        'children': [
            {
                'label': '东沙群岛',
                'value': '东沙群岛',
                'children': [
                    {
                        'label': '东沙群岛',
                        'value': '东沙群岛'
                    }
                ]
            },
            {
                'label': '广州',
                'value': '广州',
                'children': [
                    {
                        'label': '越秀区',
                        'value': '越秀区'
                    },
                    {
                        'label': '荔湾区',
                        'value': '荔湾区'
                    },
                    {
                        'label': '海珠区',
                        'value': '海珠区'
                    },
                    {
                        'label': '天河区',
                        'value': '天河区'
                    },
                    {
                        'label': '白云区',
                        'value': '白云区'
                    },
                    {
                        'label': '黄埔区',
                        'value': '黄埔区'
                    },
                    {
                        'label': '番禺区',
                        'value': '番禺区'
                    },
                    {
                        'label': '花都区',
                        'value': '花都区'
                    },
                    {
                        'label': '南沙区',
                        'value': '南沙区'
                    },
                    {
                        'label': '增城区',
                        'value': '增城区'
                    },
                    {
                        'label': '从化区',
                        'value': '从化区'
                    },
                    {
                        'label': '萝岗区',
                        'value': '萝岗区'
                    }
                ]
            },
            {
                'label': '清远',
                'value': '清远',
                'children': [
                    {
                        'label': '清城区',
                        'value': '清城区'
                    },
                    {
                        'label': '清新区',
                        'value': '清新区'
                    },
                    {
                        'label': '英德市',
                        'value': '英德市'
                    },
                    {
                        'label': '连州市',
                        'value': '连州市'
                    },
                    {
                        'label': '佛冈县',
                        'value': '佛冈县'
                    },
                    {
                        'label': '阳山县',
                        'value': '阳山县'
                    },
                    {
                        'label': '连山壮族瑶族自治县',
                        'value': '连山壮族瑶族自治县'
                    },
                    {
                        'label': '连南瑶族自治县',
                        'value': '连南瑶族自治县'
                    }
                ]
            },
            {
                'label': '韶关',
                'value': '韶关',
                'children': [
                    {
                        'label': '浈江区',
                        'value': '浈江区'
                    },
                    {
                        'label': '武江区',
                        'value': '武江区'
                    },
                    {
                        'label': '曲江区',
                        'value': '曲江区'
                    },
                    {
                        'label': '乐昌市',
                        'value': '乐昌市'
                    },
                    {
                        'label': '南雄市',
                        'value': '南雄市'
                    },
                    {
                        'label': '始兴县',
                        'value': '始兴县'
                    },
                    {
                        'label': '仁化县',
                        'value': '仁化县'
                    },
                    {
                        'label': '翁源县',
                        'value': '翁源县'
                    },
                    {
                        'label': '新丰县',
                        'value': '新丰县'
                    },
                    {
                        'label': '乳源瑶族自治县',
                        'value': '乳源瑶族自治县'
                    }
                ]
            },
            {
                'label': '梅州',
                'value': '梅州',
                'children': [
                    {
                        'label': '梅江区',
                        'value': '梅江区'
                    },
                    {
                        'label': '梅县',
                        'value': '梅县'
                    },
                    {
                        'label': '兴宁市',
                        'value': '兴宁市'
                    },
                    {
                        'label': '大埔县',
                        'value': '大埔县'
                    },
                    {
                        'label': '丰顺县',
                        'value': '丰顺县'
                    },
                    {
                        'label': '五华县',
                        'value': '五华县'
                    },
                    {
                        'label': '平远县',
                        'value': '平远县'
                    },
                    {
                        'label': '蕉岭县',
                        'value': '蕉岭县'
                    }
                ]
            },
            {
                'label': '汕头',
                'value': '汕头',
                'children': [
                    {
                        'label': '金平区',
                        'value': '金平区'
                    },
                    {
                        'label': '龙湖区',
                        'value': '龙湖区'
                    },
                    {
                        'label': '濠江区',
                        'value': '濠江区'
                    },
                    {
                        'label': '潮阳区',
                        'value': '潮阳区'
                    },
                    {
                        'label': '潮南区',
                        'value': '潮南区'
                    },
                    {
                        'label': '澄海区',
                        'value': '澄海区'
                    },
                    {
                        'label': '南澳县',
                        'value': '南澳县'
                    }
                ]
            },
            {
                'label': '惠州',
                'value': '惠州',
                'children': [
                    {
                        'label': '惠城区',
                        'value': '惠城区'
                    },
                    {
                        'label': '惠阳区',
                        'value': '惠阳区'
                    },
                    {
                        'label': '博罗县',
                        'value': '博罗县'
                    },
                    {
                        'label': '惠东县',
                        'value': '惠东县'
                    },
                    {
                        'label': '龙门县',
                        'value': '龙门县'
                    },
                    {
                        'label': '大亚湾区',
                        'value': '大亚湾区'
                    }
                ]
            },
            {
                'label': '汕尾',
                'value': '汕尾',
                'children': [
                    {
                        'label': '城区',
                        'value': '城区'
                    },
                    {
                        'label': '陆丰市',
                        'value': '陆丰市'
                    },
                    {
                        'label': '海丰县',
                        'value': '海丰县'
                    },
                    {
                        'label': '陆河县',
                        'value': '陆河县'
                    }
                ]
            },
            {
                'label': '河源',
                'value': '河源',
                'children': [
                    {
                        'label': '源城区',
                        'value': '源城区'
                    },
                    {
                        'label': '紫金县',
                        'value': '紫金县'
                    },
                    {
                        'label': '龙川县',
                        'value': '龙川县'
                    },
                    {
                        'label': '连平县',
                        'value': '连平县'
                    },
                    {
                        'label': '和平县',
                        'value': '和平县'
                    },
                    {
                        'label': '东源县',
                        'value': '东源县'
                    }
                ]
            },
            {
                'label': '深圳',
                'value': '深圳',
                'children': [
                    {
                        'label': '福田区',
                        'value': '福田区'
                    },
                    {
                        'label': '罗湖区',
                        'value': '罗湖区'
                    },
                    {
                        'label': '南山区',
                        'value': '南山区'
                    },
                    {
                        'label': '宝安区',
                        'value': '宝安区'
                    },
                    {
                        'label': '龙岗区',
                        'value': '龙岗区'
                    },
                    {
                        'label': '盐田区',
                        'value': '盐田区'
                    },
                    {
                        'label': '大鹏新区',
                        'value': '大鹏新区'
                    },
                    {
                        'label': '坪山新区',
                        'value': '坪山新区'
                    },
                    {
                        'label': '光明新区',
                        'value': '光明新区'
                    },
                    {
                        'label': '龙华新区',
                        'value': '龙华新区'
                    }
                ]
            },
            {
                'label': '珠海',
                'value': '珠海',
                'children': [
                    {
                        'label': '香洲区',
                        'value': '香洲区'
                    },
                    {
                        'label': '斗门区',
                        'value': '斗门区'
                    },
                    {
                        'label': '金湾区',
                        'value': '金湾区'
                    }
                ]
            },
            {
                'label': '潮州',
                'value': '潮州',
                'children': [
                    {
                        'label': '湘桥区',
                        'value': '湘桥区'
                    },
                    {
                        'label': '潮安县',
                        'value': '潮安县'
                    },
                    {
                        'label': '饶平县',
                        'value': '饶平县'
                    },
                    {
                        'label': '枫溪区',
                        'value': '枫溪区'
                    }
                ]
            },
            {
                'label': '揭阳',
                'value': '揭阳',
                'children': [
                    {
                        'label': '榕城区',
                        'value': '榕城区'
                    },
                    {
                        'label': '揭东县',
                        'value': '揭东县'
                    },
                    {
                        'label': '普宁市',
                        'value': '普宁市'
                    },
                    {
                        'label': '揭西县',
                        'value': '揭西县'
                    },
                    {
                        'label': '惠来县',
                        'value': '惠来县'
                    },
                    {
                        'label': '东山区',
                        'value': '东山区'
                    }
                ]
            },
            {
                'label': '东莞',
                'value': '东莞',
                'children': [
                    {
                        'label': '中堂镇',
                        'value': '中堂镇'
                    },
                    {
                        'label': '南城区',
                        'value': '南城区'
                    },
                    {
                        'label': '沙田镇',
                        'value': '沙田镇'
                    },
                    {
                        'label': '长安镇',
                        'value': '长安镇'
                    },
                    {
                        'label': '东坑镇',
                        'value': '东坑镇'
                    },
                    {
                        'label': '樟木头镇',
                        'value': '樟木头镇'
                    },
                    {
                        'label': '莞城区',
                        'value': '莞城区'
                    },
                    {
                        'label': '石龙镇',
                        'value': '石龙镇'
                    },
                    {
                        'label': '桥头镇',
                        'value': '桥头镇'
                    },
                    {
                        'label': '万江区',
                        'value': '万江区'
                    },
                    {
                        'label': '麻涌镇',
                        'value': '麻涌镇'
                    },
                    {
                        'label': '虎门镇',
                        'value': '虎门镇'
                    },
                    {
                        'label': '谢岗镇',
                        'value': '谢岗镇'
                    },
                    {
                        'label': '石碣镇',
                        'value': '石碣镇'
                    },
                    {
                        'label': '茶山镇',
                        'value': '茶山镇'
                    },
                    {
                        'label': '东城区',
                        'value': '东城区'
                    },
                    {
                        'label': '洪梅镇',
                        'value': '洪梅镇'
                    },
                    {
                        'label': '道滘镇',
                        'value': '道滘镇'
                    },
                    {
                        'label': '高埗镇',
                        'value': '高埗镇'
                    },
                    {
                        'label': '企石镇',
                        'value': '企石镇'
                    },
                    {
                        'label': '凤岗镇',
                        'value': '凤岗镇'
                    },
                    {
                        'label': '大岭山镇',
                        'value': '大岭山镇'
                    },
                    {
                        'label': '松山湖',
                        'value': '松山湖'
                    },
                    {
                        'label': '清溪镇',
                        'value': '清溪镇'
                    },
                    {
                        'label': '望牛墩镇',
                        'value': '望牛墩镇'
                    },
                    {
                        'label': '厚街镇',
                        'value': '厚街镇'
                    },
                    {
                        'label': '常平镇',
                        'value': '常平镇'
                    },
                    {
                        'label': '寮步镇',
                        'value': '寮步镇'
                    },
                    {
                        'label': '石排镇',
                        'value': '石排镇'
                    },
                    {
                        'label': '横沥镇',
                        'value': '横沥镇'
                    },
                    {
                        'label': '塘厦镇',
                        'value': '塘厦镇'
                    },
                    {
                        'label': '黄江镇',
                        'value': '黄江镇'
                    },
                    {
                        'label': '大朗镇',
                        'value': '大朗镇'
                    }
                ]
            },
            {
                'label': '湛江',
                'value': '湛江',
                'children': [
                    {
                        'label': '赤坎区',
                        'value': '赤坎区'
                    },
                    {
                        'label': '霞山区',
                        'value': '霞山区'
                    },
                    {
                        'label': '坡头区',
                        'value': '坡头区'
                    },
                    {
                        'label': '麻章区',
                        'value': '麻章区'
                    },
                    {
                        'label': '廉江市',
                        'value': '廉江市'
                    },
                    {
                        'label': '雷州市',
                        'value': '雷州市'
                    },
                    {
                        'label': '吴川市',
                        'value': '吴川市'
                    },
                    {
                        'label': '遂溪县',
                        'value': '遂溪县'
                    },
                    {
                        'label': '徐闻县',
                        'value': '徐闻县'
                    },
                    {
                        'label': '经济技术开发区',
                        'value': '经济技术开发区'
                    }
                ]
            },
            {
                'label': '茂名',
                'value': '茂名',
                'children': [
                    {
                        'label': '茂南区',
                        'value': '茂南区'
                    },
                    {
                        'label': '电白县',
                        'value': '电白县'
                    },
                    {
                        'label': '高州市',
                        'value': '高州市'
                    },
                    {
                        'label': '化州市',
                        'value': '化州市'
                    },
                    {
                        'label': '信宜市',
                        'value': '信宜市'
                    },
                    {
                        'label': '茂港区',
                        'value': '茂港区'
                    }
                ]
            },
            {
                'label': '肇庆',
                'value': '肇庆',
                'children': [
                    {
                        'label': '端州区',
                        'value': '端州区'
                    },
                    {
                        'label': '鼎湖区',
                        'value': '鼎湖区'
                    },
                    {
                        'label': '高要区',
                        'value': '高要区'
                    },
                    {
                        'label': '四会市',
                        'value': '四会市'
                    },
                    {
                        'label': '广宁县',
                        'value': '广宁县'
                    },
                    {
                        'label': '怀集县',
                        'value': '怀集县'
                    },
                    {
                        'label': '封开县',
                        'value': '封开县'
                    },
                    {
                        'label': '德庆县',
                        'value': '德庆县'
                    }
                ]
            },
            {
                'label': '云浮',
                'value': '云浮',
                'children': [
                    {
                        'label': '云城区',
                        'value': '云城区'
                    },
                    {
                        'label': '云安县',
                        'value': '云安县'
                    },
                    {
                        'label': '罗定市',
                        'value': '罗定市'
                    },
                    {
                        'label': '新兴县',
                        'value': '新兴县'
                    },
                    {
                        'label': '郁南县',
                        'value': '郁南县'
                    }
                ]
            },
            {
                'label': '佛山',
                'value': '佛山',
                'children': [
                    {
                        'label': '禅城区',
                        'value': '禅城区'
                    },
                    {
                        'label': '南海区',
                        'value': '南海区'
                    },
                    {
                        'label': '顺德区',
                        'value': '顺德区'
                    },
                    {
                        'label': '三水区',
                        'value': '三水区'
                    },
                    {
                        'label': '高明区',
                        'value': '高明区'
                    }
                ]
            },
            {
                'label': '中山',
                'value': '中山',
                'children': [
                    {
                        'label': '南头镇',
                        'value': '南头镇'
                    },
                    {
                        'label': '神湾镇',
                        'value': '神湾镇'
                    },
                    {
                        'label': '东凤镇',
                        'value': '东凤镇'
                    },
                    {
                        'label': '五桂山镇',
                        'value': '五桂山镇'
                    },
                    {
                        'label': '黄圃镇',
                        'value': '黄圃镇'
                    },
                    {
                        'label': '小榄镇',
                        'value': '小榄镇'
                    },
                    {
                        'label': '石岐山街道',
                        'value': '石岐山街道'
                    },
                    {
                        'label': '横栏镇',
                        'value': '横栏镇'
                    },
                    {
                        'label': '三角镇',
                        'value': '三角镇'
                    },
                    {
                        'label': '港口镇',
                        'value': '港口镇'
                    },
                    {
                        'label': '沙溪镇',
                        'value': '沙溪镇'
                    },
                    {
                        'label': '板芙镇',
                        'value': '板芙镇'
                    },
                    {
                        'label': '沙朗镇',
                        'value': '沙朗镇'
                    },
                    {
                        'label': '东升镇',
                        'value': '东升镇'
                    },
                    {
                        'label': '阜沙镇',
                        'value': '阜沙镇'
                    },
                    {
                        'label': '民众镇',
                        'value': '民众镇'
                    },
                    {
                        'label': '东区街道',
                        'value': '东区街道'
                    },
                    {
                        'label': '火炬开发区',
                        'value': '火炬开发区'
                    },
                    {
                        'label': '西区街道',
                        'value': '西区街道'
                    },
                    {
                        'label': '南区街道',
                        'value': '南区街道'
                    },
                    {
                        'label': '古镇',
                        'value': '古镇'
                    },
                    {
                        'label': '坦洲镇',
                        'value': '坦洲镇'
                    },
                    {
                        'label': '大涌镇',
                        'value': '大涌镇'
                    },
                    {
                        'label': '南朗镇',
                        'value': '南朗镇'
                    }
                ]
            },
            {
                'label': '江门',
                'value': '江门',
                'children': [
                    {
                        'label': '蓬江区',
                        'value': '蓬江区'
                    },
                    {
                        'label': '江海区',
                        'value': '江海区'
                    },
                    {
                        'label': '新会区',
                        'value': '新会区'
                    },
                    {
                        'label': '台山市',
                        'value': '台山市'
                    },
                    {
                        'label': '开平市',
                        'value': '开平市'
                    },
                    {
                        'label': '鹤山市',
                        'value': '鹤山市'
                    },
                    {
                        'label': '恩平市',
                        'value': '恩平市'
                    }
                ]
            },
            {
                'label': '阳江',
                'value': '阳江',
                'children': [
                    {
                        'label': '江城区',
                        'value': '江城区'
                    },
                    {
                        'label': '阳东县',
                        'value': '阳东县'
                    },
                    {
                        'label': '阳春市',
                        'value': '阳春市'
                    },
                    {
                        'label': '阳西县',
                        'value': '阳西县'
                    }
                ]
            }
        ]
    }

2:在要使用的页面中引入
2021-10-21

import { cityInfo } from '@/utils/chainMap';

3:在返回的data中定义

  data() {
        return {
            // 定义
            cityInfo: cityInfo,
            }
   }

2021-10-21
4:页面数据展示


             		this.formInline.selectedOptions = [];
                    this.formInline.selectedOptions.push(res.data.provinceName);
                    this.formInline.selectedOptions.push(res.data.cityName);
                    this.formInline.selectedOptions.push(res.data.areaName);

5:修改页面数据

methods: {
        handleChange(value) {
            this.formInline.provinceName = value[0];
            this.formInline.cityName = value[1];
            this.formInline.areaName = value[2];
        }
   }
上一篇:429. N 叉树的层序遍历


下一篇:小技能get☞☞☞微信公众号文章内图片点击切换样式