Vue+Element-UI 如何展示Json文件中的数据

今天在写代码的过程中，想要从Json文件中读取省、市、区的信息，再分别展示到下拉框中，所以想要分享一下自己写的过程和较好的实现方法。

1 思路一

json数据：

 [
 {

    "zoneId": 459,
    "code": "210000",
    "parentId": "0",
    "name": "辽宁省",
    "children": [
      {

        "zoneId": 460,
        "code": "210100",
        "parentId": "210000",
        "name": "沈阳市",
        "children": [
          {

            "zoneId": 461,
            "code": "210102",
            "parentId": "210100",
            "name": "和平区"
          },
          {

            "zoneId": 462,
            "code": "210103",
            "parentId": "210100",
            "name": "沈河区"
          },
          {

            "zoneId": 463,
            "code": "210104",
            "parentId": "210100",
            "name": "大东区"
          },
          {

            "zoneId": 464,
            "code": "210105",
            "parentId": "210100",
            "name": "皇姑区"
          },
          {

            "zoneId": 465,
            "code": "210106",
            "parentId": "210100",
            "name": "铁西区"
          },
          {

            "zoneId": 466,
            "code": "210111",
            "parentId": "210100",
            "name": "苏家屯区"
          },
          {

            "zoneId": 467,
            "code": "210112",
            "parentId": "210100",
            "name": "浑南区"
          },
          {

            "zoneId": 468,
            "code": "210113",
            "parentId": "210100",
            "name": "沈北新区"
          },
          {

            "zoneId": 469,
            "code": "210114",
            "parentId": "210100",
            "name": "于洪区"
          },
          {

            "zoneId": 470,
            "code": "210115",
            "parentId": "210100",
            "name": "辽中区"
          },
          {

            "zoneId": 471,
            "code": "210123",
            "parentId": "210100",
            "name": "康平县"
          },
          {

            "zoneId": 472,
            "code": "210124",
            "parentId": "210100",
            "name": "法库县"
          },
          {

            "zoneId": 473,
            "code": "210181",
            "parentId": "210100",
            "name": "新民市"
          }
        ]
      },
]

读取json数据，使用require方法，在这就不多介绍这个方法了，将读取的数据赋给provinceOptions

一开始是只想在标签上面做文章，嵌套标签

缺点：但是发现这样的话，我只能嵌套两层，无法展示出区这一信息。还有一个需求就是我们需要实现联动的效果 ==> 就是当选择某一个省的时候，在对应的市的下拉框中可以实现这个省对应的所有市的信息，以供选择，以此类推区/县…

但是我想了一下，基于上述的思路，我可以加个if判断来实现联动。

但是最重要的问题还是没有解决，就是展示出区的信息，所以就有了思路二

2 思路二

就是可以给省、市的下拉框标签分别加上@change方法

data() {
    return {
        districtOptions: [],
        cityOptions: [],
        provinceOptions: [],
    }
},


methods: {
    handleProvinceChange() {
      let province
      for (const item of this.provinceOptions) {
        if(item.name === this.form.province) {
          province = item
          break
        }
      }
      this.cityOptions = province ? province.children : []

      // 触发这个方法时，需要将市和区清空，
      this.form.city = ''
      this.form.district = ''
    },

    
    handleCityChange() {
      let city
      for (const item1 of this.cityOptions) {
        if(item1.name === this.form.city) {
          city = item1
          break
        }
      }

      this.districtOptions = city ? city.children : []
      this.form.collegeDistrict = ''

    }
}

        上述内容，是自己的一些想法和思考的过程，希望能够对你有些帮助！