vant 省市區三級聯動 自定義json數據展示 取值

{"code":"110000","name":"北京市"}

{"code":"110100","name":"北京市","parent_code":"110000"}

{"code":"110101","name":"東城區","parent_code":"110100"}

json文件中的省市區都是這種格式

而vant 的組件規定這種格式

 

 

 我將json數據拼接字符串 完成頁面效果

 created() {
    //導入json 文件
    let provinces = require("../../static/json/provinces.json");
    let cities = require("../../static/json/cities.json");
    let areas = require("../../static/json/areas.json");
　　 //拼接省　　
    let str = "{";
    provinces.forEach((item) => {
      str = str + '"' + item.code + '"' + ":" + '"' + item.name + '"' + ",";
    });
    let provinceStr = str.substring(0, str.length - 1) + "}";
    let province = JSON.parse(provinceStr);
    //拼接市 
    let str1 = "{";
    cities.forEach((item) => {
      str1 = str1 + '"' + item.code + '"' + ":" + '"' + item.name + '"' + ",";
    });
    let citiesStr = str1.substring(0, str1.length - 1) + "}";
    let cityse = JSON.parse(citiesStr);
    //拼接區
    let str2 = "{";
    areas.forEach((item) => {
      str2 = str2 + '"' + item.code + '"' + ":" + '"' + item.name + '"' + ",";
    });
    let areasStr = str2.substring(0, str2.length - 1) + "}";
    let areasse = JSON.parse(areasStr);
    //最后將值賦給 對象
    this.areaList.province_list = province;
    this.areaList.city_list = cityse;
    this.areaList.county_list = areasse;

    console.log(this.areaList);
  },

這樣頁面就展示出來了

 

 

 取值通過它自帶的方法

onConfirm(values) {
      this.value = values.map((item) => item.name).join("/");
      console.log(values[0].code);
      console.log(values[1].code);
      console.log(values[2].code);
      this.showArea = false;
    },

打印出來對應的code

 

 好了，這樣就實現了。當時真的好燒腦，多虧我同事幫助，非常感謝。希望本篇文章能幫到你。

我是金陵彭於晏我們下期再見！