我可以在省份的选择框里看到所有省市区的数据，而且选择一个之后，后面的市、区县的选择框还是禁选的状态，请问是我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"
},
]
省选择后看看citys数据里面有没有数据，看了下数据源。除了北京，其他省份下级数据没有。导致筛选不到，所以是禁用状态
不知道你这个问题是否已经解决, 如果还没有解决的话:props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node
switch (level) {
case 0:
// 一级菜单
setTimeout((res) => {
const nodes = res.map(item => ({
value: item.id,
label: item.name,
leaf: level >= 3
}))
resolve(nodes)
},200)
break
case 1:
// 二级菜单
setTimeout((res) => {
const nodes = res.map(item => ({
value: item.id,
label: item.name,
leaf: level >= 3
}))
resolve(nodes)
},200)
break
case 2:
// 三级菜单
setTimeout((res) => {
const nodes = res.map(item => ({
value: item.id,
label: item.name,
leaf: level >= 3
}))
resolve(nodes)
},200)
break
case 3:
// 四级菜单
setTimeout((res) => {
const nodes = res.map(item => ({
value: item.id,
label: item.name,
leaf: level >= 3
}))
resolve(nodes)
},200)
break
}
}
}