vant的Area 省市区选择组件

重点是把从接口得到的数据变异成vant组件规定的格式！！

{ province_list: { 110000: '北京市', 120000: '天津市' }, city_list: { 110100: '北京市', 110200: '县', 120100: '天津市', 120200: '县' }, county_list: { 110101: '东城区', 110102: '西城区', 110105: '朝阳区', 110106: '丰台区' 120101: '和平区', 120102: '河东区', 120103: '河西区', 120104: '南开区', 120105: '河北区', // .... } }

而且我发现地区码不用补全6位也好用，神奇！！

从接口获取到数据后：

let province_temp = {};
let province = msg.row_data.record；
province.forEach(item => {
        province_temp[item.i] = item.n;//属性名 = 属性值
})
this.areaList['province_list'] = province_temp;
//这里关键的一步是：不要在循环中直接操作渲染的数据，存到变量上，之后一次给值

市区都是一样的做法

最后我得到的数据为：

this.areaList:{
    province_list:{
    11: "北京市",
    12: "天津市",
    13: "河北省",
    14: "山西省",
    15: "内蒙古自治区",
    ...
    },
    city_list:{
    1101: "市辖区"
    },
    county_list:{
    110101: "东城区",
    110102: "西城区",
    110105: "朝阳区",
    110106: "丰台区",
    ...
    }
}    

html:

<van-cell-group>
                <van-field
                        readonly
                        clickable
                        name="area1"
                        :value="screenval1"
                        label="始发地"
                        placeholder="点击选择省市区"
                        v-on:click="areaSelect1"
                ></van-field>
                <van-popup v-model="city_show1" position="bottom">
                    <van-area title="选择始发地" :area-list="areaList" v-on:confirm="confirm1" v-on:cancel="oncancel1" v-on:change="changearea" ref="area1"></van-area>
                </van-popup>
            </van-cell-group>

js:

data:
screenval1:'', //筛选的地区文字
city_show1: false,//弹出层
address1:{},//始发地提交的信息
screenval1:'', //筛选的地区文字
addarea_map:false,
OriginAddr:'',//发货地址

//选项改变时触发
        changearea(picker, values,column){
            //values当前选中值
            //column当前滑动列索引012
            this.provincecode = Number(values[0].code);//当前省
            this.getAreaListcity(this.provincecode,column);//获取当前省下的城市
            //如果当前省下的城市存在
            if(values[1]){
                //获取该城市的编码，再获取当前城市下的区
                this.citycode = Number(values[1].code);
                this.getAreaListcounty(this.citycode);
            }
        },
//始发地
        areaSelect1(){
            this.city_show1 = true;
            this.cleanarea(1);//清空，并通过地区码定位列表值
        },
oncancel1(){
            this.city_show1 = false;
        },
        //，确定，赋值到input框
confirm1(val){
            this.screenval1 = val[0].name + "-" + val[1].name + "-" + val[2].name;
            this.address_code1 = val[2].code;
            this.address1["OProvince"] = val[0].name;
            this.address1["OCity"] = val[1].name;
            this.address1["OArea"] = val[2].name;
            this.address1["OPCode"] = val[0].code;
            this.address1["OCCode"] = val[1].code;
            this.address1["OACode"] = val[2].code;
            this.city_show1 = false;
        },
//初始化地区
        cleanarea(num){
            let self = this;
            this.areaList = {
                province_list: {},//省
                city_list: {},//市
                county_list: {},//区
            };
            //这里用克隆的数据，所以不用去请求
            this.areaList = deepClone(this.areaListTemp);
            //传入的数字可能有问题
                this.getAreaListprovince(0);
                this.getAreaListcity(Number(this.address1.OPCode));//获取城市，传入省
                this.getAreaListcounty(Number(this.address1.OCCode));//获取区，传入城市

                this.$nextTick(function(){
                    //ref的东西必须放到nextTick里，否则得不到dom
                    //重置地区列表，重置方法reset可以传code字符串来定位当前列表值，但是要传区值370211，可能方法会自动查询省市区！！！
                    self.$refs.area1.reset(String(this.address1.OACode));
                })
        },

//通过传值发请求获取所需要的区域
let getAreaData = (level,parentID,addAll) => {
    return axios.get("/Management/Prov_City_Area_Street_GetList", {
                params: {
                    level: level,
                    parentID: parentID,
                    addAll: addAll//不用了，vant可以给每列加入初始值
                }
            })
};
//获取全省，只执行一次
        async getAreaListprovince(code1){
            let self = this;
            await getAreaData(0,code1,0).then(msg => {
                if (msg.status.code == 1) {
                    //console.log(msg.row_data.record)
                    let province_temp = {};
                    let province = msg.row_data.record//省
                    //不要在循环中直接操作渲染的数据，存到变量上，之后一次给值
                    province.forEach(item => {
                        province_temp[item.i] = item.n;
                        //province_temp['defaultIndex'] = 8;初始选中项的索引不好搞https://youzan.github.io/vant/#/zh-CN/picker

                    })
                    //console.log(province_temp)
                    self.areaList['province_list'] = province_temp;
                    if(this.onlyone==0){
                        self.areaListTemp['province_list'] = deepClone(province_temp);
                    }

                } else {
                    self.$toast(msg.status.msg)
                    return;
                };
            }).catch(msg=>{
                console.log(msg)
                //self.$toast(msg)
            })

        },
        //获取该省下的城市
        //code2:省编码    column:当前操作的列索引
        async getAreaListcity(code2,column){
            let self = this;
            await getAreaData(1,code2,0).then(msg => {
                if (msg.status.code == 1) {
                    let city_temp = {};
                    let city = msg.row_data.record;//省
                    //不要在循环中直接操作渲染的数据，存到变量上，之后一次给值
                    city.forEach(item => {
                        city_temp[item.i] = item.n;
                    });
                    self.areaList['city_list'] = city_temp;
                    if(code2==11 && this.onlyone==0){
                        self.areaListTemp['city_list'] = deepClone(city_temp);
                    }

                    //当城市存在并且操作的是选择省，让他自动读出该省下的第一个区
                    if(city[0].i && column == 0){
                        self.citycode = city[0].i;
                        self.getAreaListcounty(self.citycode);
                    }
                } else {
                    self.$toast(msg.status.msg)
                    return;
                };
            }).catch(msg=>{
                console.log(msg)
                //self.$toast(msg)
            })
        },
        //获取该城市下的区
        //code3:市编码
        async getAreaListcounty(code3){
            let self = this;
            await getAreaData(2,code3,0).then(msg => {
                if (msg.status.code == 1) {
                    let county_temp = {};
                    let county = msg.row_data.record;//省
                    county.forEach(item => {
                        county_temp[item.i] = item.n;
                    })
                    self.areaList['county_list'] = county_temp;
                    if(code3==1101 && this.onlyone==0) {
                        self.areaListTemp['county_list'] = deepClone(county_temp);
                        this.onlyone==1;
                    }

                } else {
                    self.$toast(msg.status.msg)
                    return;
                };
            }).catch(msg=>{
                console.log(msg)
                //self.$toast(msg)
            })
        },

-----------------------------------------------------------------------------------

搜索的时候要模糊查询，可以给每一列加：全国，全省，全市

<van-popup v-model="city_show1" position="bottom">
        <van-area title="选择始发地" :area-list="areaList" v-on:confirm="confirm1" cancel-button-text="清空" v-on:cancel="oncancel1" v-on:change="changearea" ref="area1"  :columns-placeholder="['全国', '全省', '全市']"></van-area>
</van-popup>

但是在取值的时候麻烦点

confirm1(val){
            if(val[0].name == '' && val[0].code == ''){
                //全国情况
                val[0].name = '全国';
                val[0].code = 0;
                this.OProvince = 0;//始发地省份code(不限或全国时传0)
                this.OCity = 0;//始发地城市code(不限或全国时传0)
                this.OArea = 0;//始发地所属区code(不限或全国时传0)
                this.address1["OProvince"] = '全国';
                this.address1["OCity"] = '全省';
                this.address1["OArea"] = '全市';
                this.address1["OPCode"] = 0;
                this.address1["OCCode"] = 0;
                this.address1["OACode"] = 0;//这里必须有值，为了再次点开定位用
                this.screenval1 = '全国';
            }else if(val[1].name == '' && val[1].code == ''){
                //只选了省的情况
                val[1].name = '全省';
                val[1].code = 0;
                this.OProvince = val[0].code;//始发地省份code(不限或全国时传0)
                this.OCity = 0;//始发地城市code(不限或全国时传0)
                this.OArea = 0;//始发地所属区code(不限或全国时传0)
                this.address1["OProvince"] = val[0].name;
                this.address1["OCity"] = '全省';
                this.address1["OArea"] = '全市';
                this.address1["OPCode"] = val[0].code;
                this.address1["OCCode"] = 0;
                this.address1["OACode"] = val[0].code;//这里必须有值，为了再次点开定位用
                this.screenval1 = val[0].name;
            }else if(val[2].name == '' && val[2].code == ''){
                //选了省市，未选区的情况
                val[2].name = '全市';
                val[2].code = 0;
                this.OProvince = val[0].code;//始发地省份code(不限或全国时传0)
                this.OCity =  val[1].code;//始发地城市code(不限或全国时传0)
                this.OArea = 0;//始发地所属区code(不限或全国时传0)
                this.address1["OProvince"] = val[0].name;
                this.address1["OCity"] =  val[1].name;
                this.address1["OArea"] = '全市';
                this.address1["OPCode"] = val[0].code;
                this.address1["OCCode"] = val[1].code;
                this.address1["OACode"] = val[1].code;//这里必须有值，为了再次点开定位用
                this.screenval1 = val[1].name;
            }else{
                //省市区都选了的情况
                this.OProvince = val[0].code;//始发地省份code(不限或全国时传0)
                this.OCity = val[1].code;//始发地城市code(不限或全国时传0)
                this.OArea = val[2].code;//始发地所属区code(不限或全国时传0)
                this.address1["OProvince"] = val[0].name;
                this.address1["OCity"] = val[1].name;
                this.address1["OArea"] = val[2].name;
                this.address1["OPCode"] = val[0].code;
                this.address1["OCCode"] = val[1].code;
                this.address1["OACode"] = val[2].code;//这里必须有值，为了再次点开定位用
                this.screenval1 = val[1].name + "-" + val[2].name;//始发地不显示省val[0].name + "-" +
            }

            this.getData(1,pageSize);
            this.city_show1 = false;

        },