欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ElementUI使用Cascader实现省市区三级联动

程序员文章站 2022-03-13 23:44:16
...

效果图
ElementUI使用Cascader实现省市区三级联动
省市区的Json数据
下载链接
下面是公司上传的CDN,可以直接去引用

<script src="https://cdn.suoluomei.com/common/js2.0/city-data/city-data.js"></script>

省市区的Json格式
ElementUI使用Cascader实现省市区三级联动
这样就实现了省市区的三级联动

 <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
相关标签: UI