ElementUI使用Cascader实现省市区三级联动
程序员文章站
2022-03-13 23:44:16
...
效果图
省市区的Json数据
下载链接
下面是公司上传的CDN,可以直接去引用
<script src="https://cdn.suoluomei.com/common/js2.0/city-data/city-data.js"></script>
省市区的Json格式
这样就实现了省市区的三级联动
<el-cascader v-model="area" :options="areaList" :props="optionProps" filterable
ref="myCascader"></el-cascader>
<script>
data() {
return {
areaList: rawCitiesData,
area: [],
optionProps: { //配置节点
value: 'code',
label: 'name',
children: 'sub'
},
}
}
</script>
如果需要打印Cascader组件的label值
使用ref
var place = this.$refs['myCascader'].presentText
下一篇: mysql存储引擎区别有哪些