前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ElementUI使用Cascader实现省市区三级联动

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

作者头像
明知山
发布2020-09-03 11:23:33
4.9K0
发布2020-09-03 11:23:33
举报
文章被收录于专栏:前端开发随笔前端开发随笔

效果图

在这里插入图片描述
在这里插入图片描述

省市区的Json数据 下载链接

代码语言:javascript
复制
<script src="https://cdn.suoluomei.com/common/js2.0/city-data/city-data.js"></script>

省市区的Json格式

在这里插入图片描述
在这里插入图片描述

也可以去github下载省市区的JSON格式

代码语言:javascript
复制
 <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

代码语言:javascript
复制
 this.$refs.myCascader[0].inputValue
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-03-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档