rw941123 2023-04-04 16:17 采纳率: 80%
浏览 40
已结题

el-cascader级联选择器,只能选择省份

我可以在省份的选择框里看到所有省市区的数据,而且选择一个之后,后面的市、区县的选择框还是禁选的状态,请问是我provinces.json文件的问题吗?
这是我的选择框代码:

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

这是我的部分provinces.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"
  },
  {
    "name": "房山区",
    "value": "110111",
    "parent": "110100"
  },
  {
    "name": "通州区",
    "value": "110112",
    "parent": "110100"
  },
  {
    "name": "顺义区",
    "value": "110113",
    "parent": "110100"
  },
  {
    "name": "昌平区",
    "value": "110114",
    "parent": "110100"
  },
 
 
]
 

  • 写回答

2条回答 默认 最新

  • 流转的年华 2023-04-04 16:32
    关注

    省选择后看看citys数据里面有没有数据,看了下数据源。除了北京,其他省份下级数据没有。导致筛选不到,所以是禁用状态

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方
  • ¥15 关于生产日期批次退货退款,库存回退的问题