官方演示地址

     // v5及之后的版本 数据依赖于area_data
        npm i --save vue-area-linkage area-data
        import Vue from 'vue';
        import { pca, pcaa } from 'area-data'; // v5 or higher
        import 'vue-area-linkage/dist/index.css'; // v2 or higher
        import VueAreaLinkage from 'vue-area-linkage';

        Vue.use(VueAreaLinkage)
        // 使用
        // v5及之后的版本
        <area-select v-model="selected" :data="pca"></area-select> // 省市
        <area-select v-model="selected" :data="pcaa"></area-select> // 省市区:
        <area-cascader v-model="selected2" :data="pca"></area-cascader> // 省市
        <area-cascader v-model="selected2" :data="pcaa"></area-cascader> // 省市区:

        //setting
        <area-select type='all' :level='2' v-model="selected" :data="pcaa"></area-select>
        <area-cascader type='all' v-model="selected2" :level='1' :data="pcaa"></area-cascader>

文档地址

vue-area-linkage Vue省市区三级列表联动插件使用的更多相关文章

  1. 黄聪:基于jQuery+JSON的省市区三级地区联动

    查看演示:http://www.helloweba.com/demo/cityselect/ 源码下载:http://files.cnblogs.com/files/huangcong/citysel ...

  2. layui自定义插件citySelect 省市区三级联动选择

    省市区三级菜单联动插件 citySelect.js /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 ...

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

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

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

    npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...

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

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

  6. vue省市区三级联动

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

  7. 省市区三级联动(vue)

    vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"& ...

  8. vue+element实现省区市三级联动以及详细地址的输入

    Vue+elementui实现省区市三级联动+详细地址的输入 详细需求,需要手动更改用户所在的地址. 安装依赖项 npm install element-china-area-data -S 在组建中 ...

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

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

随机推荐

  1. 2017 Pig-0.16.0安装

    前提:已经装好hadoop2.7.3 单机版本: export PIG_HOME=/usr/local/pig    export PATH=$PATH:$PIG_HOME/bin 运行:pig -x ...

  2. Node 各个版本支持ES2015特性的网站

    如果想了解Node 各个版本支持ES2015到那个程度,可以看下面网站. https://node.green/

  3. visual Studio 中使用正则表达式来进行查找替换

    1.打开visual Studio 2. 通过菜单Edit -->Find and Replace -->Replace In File  ,或者使用  ctrl + Shift + H  ...

  4. Jetbrains IntelliJ IDEA PyCharm 注册激活(2018最新)

    AppCode CLion DataGrip GoLand IntelliJ IDEA PhpStorm PyCharm Rider RubyMine WebStorm下载注册激活 官方下载地址 Ap ...

  5. Win10家庭版-添加[组策略]

    win10家庭版有很多功能都不能用,这一次就碰到了一个找不到‘组策略’的问题,在网上搜索到了一个方法,记录一下: 新建一个txt,将下面内容复制到文本中: =====分隔符====== @echo o ...

  6. Ubuntu16.04下iTop4412环境搭建+Android4.0.3编译

    系统:Ubuntu16.04.02(优麒麟) 安装库文件和JDK 使用cd 命令,进入解压出来的“Android_JDK” -->“jdk6”文件夹,运行脚本文件 “install-sun-ja ...

  7. LeetCode算法题-Best Time to Buy and Sell Stock II

    这是悦乐书的第173次更新,第175篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第32题(顺位题号是122).假设有一个数组,其中第i个元素是第i天给定股票的价格.设计 ...

  8. 【算法】LeetCode算法题-Longest Common Prefix

    这是悦乐书的第146次更新,第148篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第5题(顺位题号是14),给定一个随机的字符串数组,查找这些字符串元素的公共前缀字符串, ...

  9. Ubuntu 12.04上安装Hadoop并运行

    Ubuntu 12.04上安装Hadoop并运行 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在官网上下载好四个文件 在Ubuntu的/home/w ...

  10. 【Linux常见问题】SecureCRT 终端连接密钥交换失败错误

    SecureCRT 终端软件连接linux操作系统,出现如下错误: 英文描述:Key exchange failed. No compatible key exchange method. The s ...