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. JS通用校验工具

    将以下form的校验内容存放到路径中 1 // 是否包含<script> 2 export function checkScript(rule, value, callback) { 3 ...

  2. 货币兑换问题(动态规划法)——Python实现

      # 动态规划法求解货币兑换问题 # 货币系统有 n 种硬币,面值为 v1,v2,v3...vn,其中 v1=1,使用总值为money的钱与之兑换,求如何使硬币的数目最少,即 x1,x2,x3... ...

  3. windows10激活方法

    原文转自:http://www.ylmfwin100.com/ylmf/8643.html 现在市面上大致有两种主流激活方法,一种是通过激活码来激活,另外一种是通过激活工具来激活.但是激活工具有个弊端 ...

  4. 论文笔记:(CVPR2017)PointNet: Deep Learning on Point Sets for 3D Classification and Segmentation

    目录 一. 存在的问题 二. 解决的方案 1.点云特征 2.解决方法 三. 网络结构 四. 理论证明 五.实验效果 1.应用 (1)分类: ModelNet40数据集 (2)部件分割:ShapeNet ...

  5. 大数据学习(18)—— Flume介绍

    老规矩,学习新东西先上官网瞅瞅Apache Flume Flume是什么 Flume是一个分布式.可靠的大规模高效日志收集.汇聚和传输的这么一个服务.它的架构基于流式数据,配置简单灵活.它具备可调节的 ...

  6. 如何从二维平面n个点中寻找距离最近两个点?

    如何理解分治算法 什么是分治算法?简单来说就是"分而治之",也就是将原问题划分成n个规模较小的,并且结构与原问题相似的子问题,然后去递归地解决这些子问题,最后再合并其结果,就得到原 ...

  7. 基于 Clusternet 与 OCM 打造新一代开放的多集群管理平台

    背景 随着 5G.物联网设备的爆炸性增长以及智能终端不断增强的计算能力,带来了前所未有的数据量,传统的中心集中式计算捉襟见肘."新基建"战略的实施,工业互联网.车联网/自动驾驶.智 ...

  8. Spring Security项目的搭建以及Spring Security的BCrypt加密

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

  9. linux的iptables设置

    添加规则 -A 在链末尾追加一条规则 -I 在链开头或某序号前插入一条规则 查看规则 -L 列出所有规则 -n 数字显示地址和端口信息 -v 详细信息 -line-numbers 显示规则序号 删除规 ...

  10. noip22

    T1 考试的时候打的特殊性质分,然而暴力竟然写假了. 正解: 显然是个贪心,要最大化 \(a_{\min}\times b_{\min}\),肯定是要删掉若干个 \(a\) 最小,\(b\) 最小的矩 ...