专栏首页前端开发随笔ElementUI使用Cascader实现省市区三级联动

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery通过Ajax实现请求后台接口数据

    wePanda
  • jQuery点击click()事件

    wePanda
  • form-create实现纯Json驱动表单验证

    wePanda
  • 深度学习|泰坦尼克号生还数据处理

    之前我们用过传统的机器学习算法预测过泰坦尼克号数据的生还情况,这次我们使用神经网络算法来进行建模。

    罗罗攀
  • 肠型分析学习笔记

    肠型,Enterotype,是2011年在这篇文章中提出的,即将过去的2018年又有20多们肠道微生物的大佬对肠型的概念进行了回顾和确认。一直比较好奇怎样来用代...

    用户1075469
  • 基于R语言利用QQ群进行数据挖掘案例整理

           利用QQ群进行数据挖掘案例,数据源来源于2016年12-2017年大致一个月的QQ群基本数据,通过对聊天内容的分析,了解QQ聊天群资料了解时间,人...

    学到老
  • 【Pytorch】笔记三:数据读取机制与图像预处理模块

    疫情在家的这段时间,想系统的学习一遍 Pytorch 基础知识,因为我发现虽然直接 Pytorch 实战上手比较快,但是关于一些内部的原理知识其实并不是太懂,这...

    阿泽 Crz
  • 通过KNN算法预测数据所属NBA球员——Python实现

    通过得分,篮板,助攻,出场时间四个数据来预测属于哪位球员。 选取了'LeBron James','Chris Paul','James Harden','Kev...

    Awesome_Tang
  • Python算法基础

    定义:算法(Algorithm)是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机制。也就是说,能够对一定规...

    用户7678152
  • 你离大厂的offer只差这份算法汇总

    定义:算法(Algorithm)是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机制。也就是说,能够对一定...

    小闫同学啊

扫码关注云+社区

领取腾讯云代金券