官方演示地址

     // 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. spring4笔记----web.xml中2.4以上版本Listener的配置

    基本上没用过Servlet2.4以下版本,所以2.4版本以下不必学了 <?xml version="1.0" encoding="UTF-8"?> ...

  2. java笔记--对信号量Semaphore的理解与运用

    java Semaphore 信号量的使用: 在java中,提供了信号量Semaphore的支持. Semaphore类是一个计数信号量,必须由获取它的线程释放, 通常用于限制可以访问某些资源(物理或 ...

  3. Alwayson查询主副本不同的JOB,Linkserver,Login

    DECLARE @SQL AS VARCHAR(5000), @Primary AS VARCHAR(50), @Secondy AS VARCHAR(50); SELECT @Primary='AA ...

  4. AndroidNDK开发中使用CMake编译JNI

    虽然一直在做NDK的开发工作,但是由于项目比较久远,都是使用Makefile进行底层编译,对于目前AndroidStudio官方提供的CMake编译方式并不是很了解,现在学习下这种已经不算新潮的新方式 ...

  5. Lingo求解线性规划案例3——混料问题

    凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/  某糖果厂用原料A.B和C按不向比率混合加工而成甲.乙.丙三种糖果(假设混合加工中不损耗原料).原料A.B.C ...

  6. 编译&链接笔记

    无法解析的外部符号? 1)库的版本不对,换成X64或Win32试试

  7. Pandas 处理丢失数据

    处理丢失数据 import pandas as pd from pandas import Series, DataFrame import numpy as np 有两种丢失数据: 1. None ...

  8. uva 11728 - Alternate Task(数论)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u011328934/article/details/36409469 option=com_onli ...

  9. xss攻击(跨站脚本)

    原理跨站脚本(Cross site script,简称xss)是一种“HTML注入”,由于攻击的脚本多数时候是跨域的,所以称之为“跨域脚本”. 我们常常听到“注入”(Injection),如SQL注入 ...

  10. UVA215-Spreadsheet Calculator(模拟+拓扑排序)

    Problem UVA215-Spreadsheet Calculator Accept:401  Submit:2013 Time Limit: 3000 mSec Problem Descript ...