官方演示地址

     // 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. OneAPM 重磅登陆 CTDC 2018展示“ AIOps 双雄”创新实力

    9月7日-8日,以“AI 智享未来”为主题的2018第二届 CTDC 首席技术官领袖峰会在乌镇盛大召开,大会由 CTOA 首席技术官领袖联盟.ITShare 主办,大会邀请了国内外顶级互联网.在线教育 ...

  2. JS的判断字符/元素是否存在数组列表

    python有in操作, 可以很方便的用于判断元素是否存在指定列表. JS的in操作是对象, 用于判断指定的属性在指定对象中是否存在. propNameOrNumber in objectName i ...

  3. [20181214]open file using O_DIRECT.txt

    [20181214]open file using O_DIRECT.txt --//因为一个测试需要,需要写一个测试小例子,验证使用O_DIRECT打开文件每次都是从磁盘读取.--//没想到浪费1个 ...

  4. 网络互联技术(2)——前篇—【转载】电脑结构和CPU、内存、硬盘三者之间的关系

    原文链接:传送门 详细内容: 电脑结构和CPU.内存.硬盘三者之间的关系 前面提到了,电脑之父——冯·诺伊曼提出了计算机的五大部件:输入设备.输出设备.存储器.运算器和控制器. 我们看一下现在我们电脑 ...

  5. Linux学习历程——Centos 7重置root密码

    一.自述 最近刚刚接触linux,因为我设置密码比较随性,把自己做系统的时候设置的root密码给forget,每当系统崩溃,重新把虚拟机备份还原后,就面临无法登陆的尴尬情况,只得重置root密码,好了 ...

  6. Shell按行读取文件的3种方法

    Shell按行读取文件的方法有很多,常见的三种方法如下: 要读取的文件: [root@mini05 -]# cat file.info 写法一: [root@mini05 -]# cat read1. ...

  7. MySQL 目录结构、配置文件、修改密码

    查看全局数据文件路径 show global variables like "%datadir%" 一.文件目录结构 文件安装路径为F:/JJ/MYSQL-5.6.42-WINX6 ...

  8. IntelliJ IDEA LicenseServer激活及使用

    一.激活 IntelliJ IDEA下载地址:https://www.jetbrains.com/idea/download/#section=windows 原文地址:http://blog.csd ...

  9. UVA1471-Copying Books(二分答案)

    Problem UVA1471-Copying Books Accept: 2669  Submit: 22797Time Limit: 3000 mSec Problem Description B ...

  10. SpringBoot MVC 拦截器

    SpringBoot MVC 环境搭建 在pom.xml添加spring-boot-starter-web   <dependency>   <groupId>org.spri ...