<el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
这是用el写的标签 因为放n个不确定的省级数据 所以建议用数组存放数据
标签写完了 可以写script
如下:
options:[
{
label:'湖北',
value:'湖北',
children:[
{label:'十堰',value:'十堰'},
{label:'武汉',value:'武汉'},
{label:'黄冈',value:'黄冈'}
]
},{
label:'广东',
value:'广东',
children:[
{label:'南海',value:'南海'},{label:'广东',value:'广东'},{label:'深圳',value:'深圳'}
]
},
{
label:'湖南',
value:'湖南',
children:[
{label:'长沙',value:'长沙'},
{label:'湘潭',value:'湘潭'},
{label:'岳阳',value:'岳阳'}
]
},{
label:'四川',
value:'四川',
children:[
{label:'成都',value:'成都'},
{label:'绵阳',value:'绵阳'},
{label:'德阳',value:'德阳'}
]
},{
label:'河南',
value:'河南',
children:[
{label:'郑州',value:'郑州'},
{label:'洛阳',value:'洛阳'},
{label:'开封',value:'开封'}]
},{
label:'江西',
value:'江西',
children:[
{label:'南昌',value:'南昌'},
{label:'九江',value:'九江'},
{label:'吉安',value:'吉安'}]
},{
label:'特别行政区',
value:'特别行政区',
children:[
{label:'香港',value:'香港'},
{label:'澳门',value:'澳门'}
]
}
],
如果你看懂了 ,就会发现特别简单 主要是格式 lable 和value 而children 指的就是 在省级下的城市 但是 这样运行的话 控制台就会报错 说selectedOptions unfidend 所以 你应该在option前加一个 selectoptions =[] 这样就可以了 你们可以试试哦 要是还有问题的话 记得留言 有缘解释
使用vue建省级联动菜单 很简单
最新推荐文章于 2023-12-22 20:07:19 发布