Element UI Cascader 级联选择器实现省市区三级联动
在使用element ui时我们会遇到使用选择器控件做地图的三级联动的场景,由于官方并没有提供以CDN形式创建的HTML项目的三级联动的数据,所以这里创建了一个 Json文件 直接点击即可下载,具体的使用过程请看下方。
1.首先我们需要准备一个控件
<el-cascader v-model="areaValue" :options="area" @change="handleChange" style="width:160px"></el-cascader>
2.在适当的时候使用AJAX读取json文件
$.ajax({
url:"JS/citys.json",
dataType:'json',
success: function(msg) {
vm.area = eval(msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
antd.message.error('省市区信息读取失败')
}
});
完成以上两步就可以实现三级联动了