1、后端的json数据格式为
{
"adcode": "370600",
"name": "烟台市",
"level": "city",
"districts": [
{
"adcode": "370614",
"name": "蓬莱区",
"level": "district",
"districts": [
{
"adcode": "370614",
"name": "大柳行镇",
"level": "street",
"districts": []
},
{
"adcode": "370614",
"name": "村里集镇",
"level": "street",
"districts": []
},
{
"adcode": "370614",
"name": "大辛店镇",
"level": "street",
"districts": []
}
]
},
{
"adcode": "370612",
"name": "牟平区",
"level": "district",
"districts": [
{
"adcode": "370612",
"name": "文化街道",
"level": "street",
"districts": []
},
{
"adcode": "370612",
"name": "武宁街道",
"level": "street",
"districts": []
},
]
},
]
}
2、html部分
<el-cascader v-model="searchForm.address" placeholder="全部" :options="operationList" :props="props" clearable/>
3、js部分
export default {
data() {
return {
searchForm: {
address: '',
},
operationList:[{}],
props:{
children: 'districts',//子选项
label: 'name',//指定选项标签为选项对象的某个属性值
value: 'adcode',//指定选项的值为选项对象的某个属性值
checkStrictly: true,//父子节点不互相关联
}
}
},
mounted(){
this.getList()
},
methods: {
// 加载数据
getList() {
$getAxios(api.getList, '', (res) => {
if (res && res.code == 200) {
this.operationList = res.data;
this.fn(this.operationAreaList)
}
});
},
//最后一项,去掉暂无数据页
//1、循环所有数据,判断是否还有子数据;2有继续循环,3无删除当前子集对象
fn(list) {
list.forEach(item => {
if(item.districts&&Array.isArray(item.districts)&&item.districts.length>0) {
this.fn(item.districts)
}else {
delete item.districts
}
})
},
}
}