1.效果预览:

2.引入资源文件

1.vue资源

<script src="https://unpkg.com/vue/dist/vue.js"></script>

2.elementUI资源

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3.city-data.js资源

3.业务代码

1.html代码

<div id="app">
  <el-cascader :options="CityInfo" v-model="form.selectedOptions" :change-on-select="true" :clearable="true" :filterable="true" @change="handleChange">
  </el-cascader>
  <span>所选地区:{{form.city | myAddressCity}}{{form.area | myAddressArea}}{{form.minarea | myAddressMinarea}}</span>
</div>

2.js代码

     const app = new Vue({
el: '#app',
data: {
CityInfo: CityInfo,
form: {
city: '',
area: '',
minarea: '',
selectedOptions: [],//地区筛选数组
},
},
created() {
},
methods: {
handleChange(value) {
this.form.city = this.form.selectedOptions[0];
this.form.area = this.form.selectedOptions[1]
this.form.minarea = this.form.selectedOptions[2]
},
20    },
filters: {
myAddressCity: function (value) {
for (y in this.CityInfo) {
if (this.CityInfo[y].value == value) {
return value = this.CityInfo[y].label
}
}
},
myAddressArea: function (value) {
for (y in this.CityInfo) {
for (z in this.CityInfo[y].children) {
if (this.CityInfo[y].children[z].value == value && value != undefined) {
return value = this.CityInfo[y].children[z].label;
}
}
}
},
myAddressMinarea: function (value) {
for (y in this.CityInfo) {
for (z in this.CityInfo[y].children) {
for (i in this.CityInfo[y].children[z].children) {
if (this.CityInfo[y].children[z].children[i].value == value && value != undefined) {
return value = this.CityInfo[y].children[z].children[i].label
}
}
}
}
},
},
})

制作完成,其他更多用法参考官网:http://element-cn.eleme.io/#/zh-CN/component/cascader

后记1:在city-data.js中删除第三级地区,就可以实现省市二级联动.

    地址:https://github.com/Ele-Cat/Ele-Cat.github.io/blob/master/city-data-2d.js

后记2:用vuejs+elementUI写了一个可查看全国城市的天气预报功能,项目演示地址:https://ele-cat.github.io/forecast/,代码地址:https://github.com/Ele-Cat/Ele-Cat.github.io/tree/master/forecast

使用element-ui制作三级级联城市选择器的更多相关文章

  1. html5手机移动端三级联动城市选择器

    //我的地址 var area1 = new LArea(); area1.init({ 'trigger': '#demo1', //触发选择控件的文本框,同时选择完毕后name属性输出到该位置 ' ...

  2. Element UI 中国省市区级联数据

    https://www.npmjs.com/package/element-china-area-data

  3. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  4. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  5. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  6. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  7. 【Element UI】使用问题记录

    [Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...

  8. hotCity 小程序城市选择器, 城市数据库可自己导出

    hotCity 城市选择器, 城市数据库可自己导出 后台数据API 由HotApp小程序统计提供并维护,如果需要导出并部署在公司的生产环境,最后有SQL导出下载地址 开源地址 https://gith ...

  9. zTree实现地市县三级级联报错(三)

    zTree实现地市县三级级联报错(三) 1.具体报错如下 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] ...

随机推荐

  1. 论文笔记系列-DARTS: Differentiable Architecture Search

    Summary 我的理解就是原本节点和节点之间操作是离散的,因为就是从若干个操作中选择某一个,而作者试图使用softmax和relaxation(松弛化)将操作连续化,所以模型结构搜索的任务就转变成了 ...

  2. Java 注解 (Annotation)你可以这样学

    注解语法 因为平常开发少见,相信有不少的人员会认为注解的地位不高.其实同 classs 和 interface 一样,注解也属于一种类型.它是在 Java SE 5.0 版本中开始引入的概念. 注解的 ...

  3. JSON的理解

    官方解释: JSON的全称是”JavaScript Object Notation”,单单从字面上的理解就是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式. 理解: ...

  4. freeRTOS中文实用教程4--资源管理互斥

    1.前言 访问一个被多任务共享,或是被任务与中断共享的资源时,需要采用”互斥”技术以保证数据在任何时候都保持一致性.这样做的目的是要确保任务从开始访问资源就具有排它性,直至这个资源又恢复到完整状态 F ...

  5. 通过全备+主从同步恢复被drop的库或表

    MySQL 中drop 等高危误操作后恢复方法 实验目的: 本次实验以恢复drop操作为例,使用不同方法进行误操作的数据恢复. 方法: 利用master同步(本文)] 伪master+Binlog+同 ...

  6. maven项目提示web.xml is missing或红色感叹号

    1.web.xml is missing and <failOnMissingWebXml> is set to true 提示信息应该能看懂.也就是缺少了web.xml文件,<fa ...

  7. 002_HTTP每日分析及翻译

    一.Request Headers Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng ...

  8. centos7 Firewalld操作集合

    =============================================== 2019/4/15_第1次修改                       ccb_warlock == ...

  9. PHP获取网卡的MAC地址原码;目前支持WIN/LINUX系统 获取机器网卡的物理(MAC)地址

    声明转换于其它博客当中的. <?php /** 获取网卡的MAC地址原码:目前支持WIN/LINUX系统 获取机器网卡的物理(MAC)地址 **/ class GetMacAddr{ var $ ...

  10. Day6------------硬盘分区

    1.sda1 sd:串行接口 a:第一块硬盘 1:第一个分区 ls /dev/sd 查看硬盘 fdisk -l /dev/sda 查看分区信息 block------------>8*512 8 ...