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

时间:2022-07-24
本文章向大家介绍ElementUI使用Cascader实现省市区三级联动，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

效果图

省市区的Json数据 下载链接

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

省市区的Json格式

也可以去github下载省市区的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

 this.$refs.myCascader[0].inputValue

随机文章
本站知识点必读
最近更新