通过element-ui级联选择器选择地区

我目前的省市区代码是这样的，只能通过手动输入，我想可以选择一个省之后，下面的市的选择范围是对应的，然后选择之后下方的区县也是对应这样，请问要怎么实现呢？我看好多代码都是一个框里显示省市区，我想保留三个框

<el-row>
                  <el-col :span="20">
                    <el-form-item label="省份" prop="province">
                      <el-input v-model="addForm.province">el-input>
                    el-form-item>
                  el-col>
                el-row>

                <el-row>
                  <el-col :span="20">
                    <el-form-item label="城市" prop="city">
                      <el-input v-model="addForm.city">el-input>
                    el-form-item>
                  el-col>
                el-row>

                <el-row>
                  <el-col :span="20">
                    <el-form-item label="区县" prop="county">
                      <el-input v-model="addForm.county">el-input>
                    el-form-item>
                  el-col>
                el-row>

这是我有的province.json文件：

[
    {
        "name": "北京市",
        "value": "110000"
    },
    {
        "name": "天津市",
        "value": "120000"
    },
    {
        "name": "河北省",
        "value": "130000"
    },
    {
        "name": "山西省",
        "value": "140000"
    },
    {
        "name": "内蒙古自治区",
        "value": "150000"
    },
    {
        "name": "辽宁省",
        "value": "210000"
    },
    {
        "name": "吉林省",
        "value": "220000"
    },
    {
        "name": "黑龙江省",
        "value": "230000"
    },
    {
        "name": "上海市",
        "value": "310000"
    },
    {
        "name": "江苏省",
        "value": "320000"
    },
    {
        "name": "浙江省",
        "value": "330000"
    },
    {
        "name": "安徽省",
        "value": "340000"
    },
    {
        "name": "福建省",
        "value": "350000"
    },
    {
        "name": "江西省",
        "value": "360000"
    },
    {
        "name": "山东省",
        "value": "370000"
    },
    {
        "name": "河南省",
        "value": "410000"
    },
    {
        "name": "湖北省",
        "value": "420000"
    },
    {
        "name": "湖南省",
        "value": "430000"
    },
    {
        "name": "广东省",
        "value": "440000"
    },
    {
        "name": "广西壮族自治区",
        "value": "450000"
    },
    {
        "name": "海南省",
        "value": "460000"
    },
    {
        "name": "重庆市",
        "value": "500000"
    },
    {
        "name": "四川省",
        "value": "510000"
    },
    {
        "name": "贵州省",
        "value": "520000"
    },
    {
        "name": "云南省",
        "value": "530000"
    },
    {
        "name": "西藏自治区",
        "value": "540000"
    },
    {
        "name": "陕西省",
        "value": "610000"
    },
    {
        "name": "甘肃省",
        "value": "620000"
    },
    {
        "name": "青海省",
        "value": "630000"
    },
    {
        "name": "宁夏回族自治区",
        "value": "640000"
    },
    {
        "name": "新疆维吾尔自治区",
        "value": "650000"
    },
    {
        "name": "市辖区",
        "value": "110100",
        "parent": "110000"
    },
    {
        "name": "东城区",
        "value": "110101",
        "parent": "110100"
    },
    {
        "name": "西城区",
        "value": "110102",
        "parent": "110100"
    },
    {
        "name": "朝阳区",
        "value": "110105",
        "parent": "110100"
    },
    {
        "name": "丰台区",
        "value": "110106",
        "parent": "110100"
    },
    {
        "name": "石景山区",
        "value": "110107",
        "parent": "110100"
    },
    {
        "name": "海淀区",
        "value": "110108",
        "parent": "110100"
    },
    {
        "name": "门头沟区",
        "value": "110109",
        "parent": "110100"
    },
  

基于Monster 组和GPT的调写：

• 可以通过联动选择框来实现这个功能，当省份选择后，根据省份的值动态生成对应的城市选择框，当城市选择后，再动态生成对应的区县选择框。要使用一个数组来保存所有的省份数据，以及三个变量来保存当前选择的省份、城市和区县。然后，要在页面中添加三个选择框，并绑定对应的变量，然后在每个选择框的change事件中更新对应的变量和下一个选择框的数据。你可以根据省份、城市、区县的value来进行筛选，然后将对应的数据绑定到选择框的options属性上。

以下是一个示例代码：

<template>
  <el-row>
    <el-col :span="8">
      <el-form-item label="省份" prop="province">
        <el-select v-model="selectedProvince" @change="handleProvinceChange">
          <el-option
            v-for="province in provinces"
            :key="province.value"
            :label="province.name"
            :value="province.value"
          />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="城市" prop="city">
        <el-select v-model="selectedCity" @change="handleCityChange" :disabled="!cities.length">
          <el-option
            v-for="city in cities"
            :key="city.value"
            :label="city.name"
            :value="city.value"
          />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="区县" prop="county">
        <el-select v-model="selectedCounty" :disabled="!counties.length">
          <el-option
            v-for="county in counties"
            :key="county.value"
            :label="county.name"
            :value="county.value"
          />
        </el-select>
      </el-form-item>
    </el-col>
  </el-row>
</template>
<script>
import provincesData from '@/assets/provinces.json';

export default {
  data() {
    return {
      provinces: provincesData,
      selectedProvince: '',
      cities: [],
      selectedCity: '',
      counties: [],
      selectedCounty: '',
    };
  },
  methods: {
    handleProvinceChange(value) {
      // 根据省份的值筛选对应的城市数据
      this.cities = provincesData.find(item => item.value === value).children || [];
      // 清空城市和区县的值
      this.selectedCity = '';
      this.selectedCounty = '';
    },
    handleCityChange(value) {
      // 根据城市的值筛选对应的区县数据
      const selectedProvince = provincesData.find(item => item.value === this.selectedProvince);
      const selectedCity = selectedProvince.children.find(item => item.value === value);
      this.counties = selectedCity.children || [];
      // 清空区县的值
      this.selectedCounty = '';
    },
  },
};
</script> 

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7783309
• 这篇博客你也可以参考下：Element UI自定义数据校验以及失效解决
• 除此之外, 这篇博客: Element UI 树形控件设置默认选中节点并展开到那个节点，树形控件折叠所有节点，展开所有节点中的 使用按钮控制展开或折叠所有节点 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  // 在data中声明一个属性表明折叠状态
  data() {
  	return {
  		expanded: false
  	}
  },
  methods: {
  	// 按钮控制方法
  	foldHandler() {
  		this.expanded = !this.expanded
  		for(let i = 0;i < this.$refs.tree.store._getAllNodes().length; i++) {
              this.$refs.tree.store._getAllNodes()[i].expanded = this.expanded
          }
  	}
  }
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^