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;

        },