rw941123 2023-04-01 22:00 采纳率: 80%
浏览 32
已结题

通过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"
    },
  
  • 写回答

2条回答 默认 最新

  • 社区专家-Monster-XH 2023-04-02 09:21
    关注

    基于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> 
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月12日
  • 已采纳回答 4月4日
  • 创建了问题 4月1日

悬赏问题

  • ¥15 关于vue2中methods使用call修改this指向的问题
  • ¥15 idea自动补全键位冲突
  • ¥15 请教一下写代码,代码好难
  • ¥15 iis10中如何阻止别人网站重定向到我的网站
  • ¥15 滑块验证码移动速度不一致问题
  • ¥15 定制ai直播实时换脸软件
  • ¥100 栈回溯相关,模块加载后KiExceptionDispatch无法正常回溯了
  • ¥15 Utunbu中vscode下cern root工作台中写的程序root的头文件无法包含
  • ¥15 麒麟V10桌面版SP1如何配置bonding
  • ¥15 Marscode IDE 如何预览新建的 HTML 文件