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

Question

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

<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"
    },
  

Answer 1

基于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>