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

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

<el-form-item label="所在市" prop="city">
          <el-select v-model="form.city" filterable placeholder="请选择所在市"  clearable
           >
            <el-option-group
              v-for="item in provinceOptions"
              :key="item.zoneId"
              :label="item.name"
              :value="item.name"
            >
                <el-option 
                    v-for="item1 in item.children"
                    :key="item1.zoneId"
                    :label="item1.name"
                    :value="item1.name"
                >
                </el-option>
            </el-option-group>
          </el-select>
</el-form-item>复制

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

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

<el-option-group
              v-for="item in provinceOptions"
              :key="item.zoneId"
              :label="item.name"
              :value="item.name"
            >
                <el-option 
                    v-if="item.name == form.province" 
                    v-for="item1 in item.children"
                    :key="item1.zoneId"
                    :label="item1.name"
                    :value="item1.name"
                >
                </el-option>
</el-option-group>复制

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

2 思路二

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

<el-form-item label="所在省" prop="province">
          <el-select v-model="form.province" filterable placeholder="请选择所在省"  clearable
                     @change="handleProvinceChange">
            <el-option
              v-for="item in provinceOptions"
              :key="item.zoneId"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
 
        <el-form-item label="所在市" prop="city">
          <el-select v-model="form.city" filterable placeholder="请选择所在市"  clearable
                     @change="handleCityChange">
            <el-option
              v-for="item in cityOptions"
              :key="item.zoneId"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在区/县" prop="district">
          <el-select v-model="form.district" filterable placeholder="请选择所在区/县"  clearable>
            <el-option
              v-for="item in districtOptions"
              :key="item.zoneId"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>复制

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 = ''
 
    }
}复制

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