H5引入vant异步加载省市区三级联动

 

html

 <van-field v-model="placeCityValue" is-link readonly required input-align="right" label="籍贯所在市"
                placeholder="请选择籍贯所在市" @click="placeCityshow = true" class="jiguan"></van-field>
            <van-popup v-model="placeCityshow" round position="bottom">
                <van-cascader v-model="cascaderValue" title="请选择籍贯所在市" :options="options" @close="placeCityshow = false"
                    @change="onChange" @finish="onFinish" active-color="#23d1b1" />
                </van-cascader>
            </van-popup>

主要是把你接口调出来的省市区拼成官网的格式，官网格式如下：

 options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],

js

 //获取省份
                getOfficeByType: function () {
                    // console.log(this.$http.interceptors);
                    document.cookie =
                        "zhaosheng." + schcode + ".session.id=" +
                        localStorage.getItem("cookie");
                    var url = baseURL + '/f/api/v1/zsxc/sys/getProvinceList'
                    //发送 post 请求
                    this.$http.post(url, {
                        parentId: ''
                    }).then(res => {
                        console.log(res);
                        this.initlist = res.data.data;
                        var obj = {};
                        for (var i = 0; i < res.data.data.length; i++) {
                            obj = {
                                text: res.data.data[i].fullName,
                                value: res.data.data[i].code,
                                children: [],//省里面带children才能出现市区 市区里面带children可出现市区内区划 也就是省市区三级 所以是要把数据拼成这个格式即可
                            };
                            this.options.push(obj);
                            // console.log(this.options)
                        }
                    });
                },

//每选择一级onchange都会执行一次
 onChange({
                    value
                }) {
                    console.log(value)
                    this.options.forEach((ele, index) => {
                        if (value == ele.value) {
                            ele.children = []
                            var url = baseURL + '/f/api/v1/zsxc/sys/getAreaListByParentId'
                            //发送 post 请求
                            this.$http.post(url, {
                                parentId: value
                            }).then(res => {
                                // console.log(res);
                                res.data.data.forEach((item) => {
                                    //console.log(item);
                                    if (item.name == '市辖区') {
                                        //console.log('市辖区');//像北京这些直辖市 只有二级 我的接口是请求两遍才能把直辖市的区划调出来  
                                        this.sheng = item.parentId;
                                        //发送 post 请求
                                        this.$http.post(url, {
                                            parentId: item.code
                                        }).then(res => {
                                            // console.log(res);
                                            res.data.data.forEach((item1) => {
                                                console.log(item1)
                                                ele.children.push({
                                                    text: item1.name,
                                                    value: item1.code,
                                                });
                                            })
                                        });
                                    } else {
                                        //console.log('bushi市辖区');
                                        ele.children.children = []
                                        ele.children.push({
                                            text: item.name,
                                            value: item.code,
                                            children: []//第三级
                                        });

                                        console.log(ele);
                                        // ele.children.forEach(item3 => {
                                        //     ele.children.children.push({
                                        //         text: '111',
                                        //         value: '130100',
                                        //     })
                                        // })
                                        ele.children.forEach(item3 => {
                                            this.$http.post(url, {
                                                    parentId: item3.value
                                                }).then(res => {
                                                    console.log(res);

                                                    res.data.data.forEach((item2) => {
                                                        item3.children.push({
                                                            text: item2.name,
                                                            value: item2.code,
                                                        });
                                                    })
                                                });
                                            
                                        })


                                        console.log(ele);

                                    }
                                });
                                console.log(ele);
                            });

                        }
                    });

                },

 onFinish({
                    selectedOptions
                }) {
                    console.log(selectedOptions);//这里有需要的省市区code
                    this.placeCity = selectedOptions[1].value;
                    this.placeProvince = selectedOptions[0].value;
                    this.placeCityshow = false;
                    this.placeCityValue = selectedOptions
                        .map((option) => option.text)
                        .join("/");
                },