官方演示地址

     // 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. 记录一次spark连接mysql遇到的问题

    版权声明:本文为博主原创文章,未经博主允许不得转载 在使用spark连接mysql的过程中报错了,错误如下 08:51:32.495 [main] ERROR - Error loading fact ...

  2. ERROR 3009 (HY000): Column count of mysql.user is wrong…..

    在测试备份还原时,使用XtraBackup还原数据库后,创建一个测试账号时遇到了下面错误: mysql> grant all on house.* to test@'192.168.%' ide ...

  3. How to monitor tempdb in MS SQL

    Error: tempdb is full due to active_transaction. select ss.[host_name], ss.login_name, ss.original_l ...

  4. java应用系统运行速度慢的解决方法

    场景:我们在部署了TOMCAT应用,刚刚开始启动的一个段时间内.访问系统的速度比较快.但是过了一段时间,应用系统就慢慢的变慢起来了.服务的访问加载时间慢慢变长. 问题解决思路: 1,查看部署应用系统的 ...

  5. Linux atop 监控系统状态

    atop是一个功能非常强大的linux服务器监控工具,它的数据采集主要包括:CPU.内存.磁盘.网络.进程等,并且内容非常的详细,特别是当那一部分存在压力它会以特殊的颜色进行展示,如果颜色是红色那么说 ...

  6. Python 3 iter函数用法简述

    Python 3中关于iter(object[, sentinel)]方法有两个参数. 使用iter(object)这种形式比较常见. iter(object, sentinel)这种形式一般较少使用 ...

  7. 安全之路 —— 利用APC队列实现跨进程注入

    简介 在之前的文章中笔者曾经为大家介绍过使用CreateRemoteThread函数来实现远程线程注入(链接),毫无疑问最经典的注入方式,但也因为如此,这种方式到今天已经几乎被所有安全软件所防御.所以 ...

  8. kafka_2.11-2.0.0_安装部署

    参考博文:kafka 配置文件参数详解 参考博文:Kafka[第一篇]Kafka集群搭建 参考博文:如何为Kafka集群选择合适的Partitions数量 参考博文:Kafka Server.prop ...

  9. May 27. 2018 Week 22nd Sunday

    All things come to those who wait. 苍天不负有心人. It is said that those who are patient can see what their ...

  10. 4、爬虫系列之mongodb

    mongodb mongo简介 简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB是一个介于关系数据库和非关系数 ...