npm 下载

npm install element-china-area-data -S

main.js

import {provinceAndCityData,regionData,provinceAndCityDataPlus,regionDataPlus,CodeToText,TextCode} from 'element-china-area-data'
 
vue 文件
template 部分
 
<div class="linkage">
     <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" placeholder="请选择省/市/区"></el-cascader>
 </div>
 
script 部分
 
import {regionData, CodeToText} from "element-china-area-data"
 
data 部分
//省市区三级联动
options : regionData,
selectedOptions : [],
 
methods 部分
handleChange(value){
            this.selectedOptions[0] = CodeToText[value[0]]
            this.selectedOptions[1] = CodeToText[value[1]]
            this.selectedOptions[2] = CodeToText[value[2]]
        },
 
 
 

vue 引用省市区三级联动(element-ui Cascader)的更多相关文章

  1. vue 引用省市区三级联动(插件)

    vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...

  2. vue 引用省市区三级联动(element-ui select)

    npm 下载 axios npm install --save axios static 静态文件夹里 创建 json 文件夹 json 文件夹里创建 map.json map.json 文件里写 ( ...

  3. vue实现省市区三级联动

    npm 安装 npm install v-distpicker --save Vue全局引入组件 import Distpicker from 'v-distpicker' Vue.component ...

  4. 基于Vue的省市区三级联动插件

    官网地址:https://distpicker.uine.org/ 安装: npm install v-distpicker --save 局部注册: import VDistpicker from ...

  5. vue仿京东省市区三级联动选择组件

    工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...

  6. vue省市区三级联动

    仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...

  7. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  8. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  9. java的JCombobox实现中国省市区三级联动

    源代码下载:点击下载源代码 用xml存储中国各大城市的数据. xml数据太多了就不贴上了,贴个图片: 要解释xml,添加了一个jdom.jar,上面的源代码下载里面有. 解释xml的类: packag ...

随机推荐

  1. 2019版pycharm永久激活

    链接:https://pan.baidu.com/s/1vY1KBvi2NHIgoN8C2qaFbg 提取码:p4gx 1.下对应版本的jar包,放到pycharm目录的bin目录下2.去C:\Use ...

  2. Python - 基础数据类型 dict 字典

    字典简介 字典在 Python 里面是非常重要的数据类型,而且很常用 字典是以关键字(键)为索引,关键字(键)可以是任意不可变类型 字典由键和对应值成对组成,字典中所有的键值对放在 { } 中间,每一 ...

  3. Apache Flink jobmanager/logs路径遍历CVE-2020-17519

    影响版本 1.11.0 1.11.1 1.11.2 poc http://192.168.49.2:8081/jobmanager/logs/..%252f..%252f..%252f..%252f. ...

  4. 让自己写的电子笔记连文带图全平台兼容(MarkDown图片显示兼容)

    目录 一.工具使用 语言使用:MarkDown 简介 使用原因 使用方法 软件使用:Typora 简介 环境设置搭建 1)搭建图床 2)配置PicGo 3)配置typora 4)测试 图片上传测试 平 ...

  5. 云服务器是什么?ECS、BCC、CVM...

    什么是云服务器?云服务器有哪些优势?能用来干什么? 很多人不太了解云服务器的定义和用途. 云服务器是一种简单高效.处理能力可弹性伸缩的计算服务,帮助用户快速构建更稳定.安全的应用,提升运维效率,降低 ...

  6. Java中泛型的详细解析,深入分析泛型的使用方式

    泛型的基本概念 泛型: 参数化类型 参数: 定义方法时有形参 调用方法时传递实参 参数化类型: 将类型由原来的具体的类型参数化,类似方法中的变量参数 类型定义成参数形式, 可以称为类型形参 在使用或者 ...

  7. Java8新特性(二)之函数式接口

    .subTitle { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); border- ...

  8. Rancher v1.6.29 Docker单节点部署

    前言: Docker镜像中心,有两个版本的rancher(1.X),镜像名称为:rancher/server,而rancher(2.X)的镜像名称是rancher/rancher 去daocloud官 ...

  9. 【原创】冰蝎v3.0操作使用手册

    写在前面 近期冰蝎更新了内网穿透模块中的一些功能,有不少朋友不知道参数怎么填,希望能出一个使用指导手册,就借这个机会写一个"说明书"(文中有大量演示动图,请耐心等待加载). 基本信 ...

  10. 流动的观察者模式 | Flutter 设计模式

    观察者模式,又称发布订阅模式,是一种行为设计模式--你可以定义一种订阅机制,可在对象事件发生时通知多个 观察 该对象的其他对象. 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主 ...