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. 初学MyBatis(踩坑)Error querying database. Cause: java.sql.SQLException: java.lang.ClassCastException: java.math.BigInteger cannot be cast to java.lang.Long

    最近在学习Mybatis,代码全部根据教程写好了,一运行结果报了一个错误,主要错误内容: Caused by: org.apache.ibatis.exceptions.PersistenceExce ...

  2. 7年老Android收到阿里offer,跟领导提离职被怼:为年薪百万不做兄弟?

    在当今社会,钱就是衡量一个人价值的标准,如果你在一家公司,领导再怎么重用你,但是薪资待遇却很低,这样根本是很难留住人,毕竟工作就是为了赚钱,要是连工资都满足不了,谈其他根本就是扯淡. 最近在职业论坛看 ...

  3. OceanBase三节点部署&&扩容

    OceanBase三节点部署&&扩容 环境信息搭建三节点(1-1-1)创建资源池和租户查看数据分布 环境信息 IP OB目录 端口 192.168.43.89 /data/observ ...

  4. MySQL学习07(规范化数据库设计)

    规范化数据库设计 当数据库比较复杂时我们需要设计数据库 糟糕的数据库设计 : 数据冗余,存储空间浪费 数据更新和插入的异常 程序性能差 良好的数据库设计 : 节省数据的存储空间 能够保证数据的完整性 ...

  5. docker-01

    Docker介绍 1 什么是容器? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移 ...

  6. JavaWeb——CSS总结

    CSS 记得大一下学期那会参加基地后就开始跟师兄师姐接触前端了,利用业余时间在站看各种视频.由于初次认知并且时间也能不固定集中,也存在跳跃式学习等等原因,这就导致了好多知识点要么漏掉要么没记全,只能懂 ...

  7. MySQL为什么不支持中文排序?

    前言 或许都知道,MySQL不支持中文排序,这样的说法可以说对也可以说也不对.接下来我们分析一下: 首先执行命令,查看编码集: SHOW VARIABLES LIKE 'character_set%' ...

  8. NOIP 模拟 9 数颜色

    题解 一道裸的数据结构题 正解是排序 \(+\) 二分,但是这怎么能有动态开点线段树好写呢? 于是我就打了暴力,骗了五十分. 对于每种颜色,我们在下标上开一颗线段树,对于交换若颜色相同则跳过,否则直接 ...

  9. 题解 u

    传送门 这里AC解法因为手残 tag2[min(r+l, n+1)][min(c+l+1, n+1)]+=s; 写成 tag2[min(r+l, n+1)][c+l+1]+=s; 惨遭RE,以后注意查 ...

  10. NPM使用方法

    什么是npm npm是nodejs的包管理器,在当今工程化前端开发过程中,npm包起着举足轻重的作用. 安装npm 作为nodejs的包管理器,npm随着nodejs一起安装的.通常情况下,当我们安装 ...