vue-area-linkage Vue省市区三级列表联动插件使用
// 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省市区三级列表联动插件使用的更多相关文章
- 黄聪:基于jQuery+JSON的省市区三级地区联动
查看演示:http://www.helloweba.com/demo/cityselect/ 源码下载:http://files.cnblogs.com/files/huangcong/citysel ...
- layui自定义插件citySelect 省市区三级联动选择
省市区三级菜单联动插件 citySelect.js /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
- vue 引用省市区三级联动(element-ui Cascader)
npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...
- vue 引用省市区三级联动(插件)
vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...
- vue省市区三级联动
仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...
- 省市区三级联动(vue)
vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"& ...
- vue+element实现省区市三级联动以及详细地址的输入
Vue+elementui实现省区市三级联动+详细地址的输入 详细需求,需要手动更改用户所在的地址. 安装依赖项 npm install element-china-area-data -S 在组建中 ...
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
随机推荐
- Visual Studio Team Services Demo Generator简介
Visual Studio Team Services Demo Generator简介 Visual Studio Team Services Demo Generator能够帮助我们在Visual ...
- web前端(15)—— JavaScript的数据类型,语法规范2
Object对象 说这个对象之前,如果您对编程语言开发稍微有点了解的话,应该知道面向对象是什么意思,而js也有面向对象一说,就因为如此,js才会这么强大. 什么是面向对象 其实所有支持面向对象的编程语 ...
- JS实现定时器
导出:jquery.timers-1.2.js jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. ...
- 多文档界面的实现(DotNetBar的superTabControl)
private void FormMain_Load(object sender, EventArgs e) { superTabControl2.Tabs.Clear(); timer1.Start ...
- Linux学习历程——Centos 7 man命令
一.man命令介绍 man,为单词manual的缩写,是linux下的帮助指令. 二.实例 以man命令为例,输入 man man 获取man命令的帮助文档 可以看出,使用man命令查询到的帮助信 ...
- 让python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求(新方法)
通过上篇博文的方法处理后,进入代码调试后发现ajax获取不了服务器端返回的数据,度娘后发现原来AJAX的OPTIONS请求方式是状态类型查询,即向服务器提交信息后不返回任何信息,只将执行状态(200状 ...
- PTA天梯 L3-007 天梯地图
L3-007 天梯地图 题目: 本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地 ...
- 寒假特训——搜索——H - Nephren gives a riddle
What are you doing at the end of the world? Are you busy? Will you save us? Nephren is playing a gam ...
- Java基础知识点(一)
前言:本篇随笔,主要记录Java的基础知识点,不管是用于项目或者面试中,笔者认为都非常有用,所以将持续更新...... 1.Java的访问权限 Java中有四种访问权限:默认访问权限.public.p ...
- C#多线程编程のTask(任务全面解析)
Task是.NET4.0加入的,跟线程池ThreadPool的功能类似,用Task开启新任务时,会从线程池中调用线程,而Thread每次实例化都会创建一个新的线程. 我们可以说Task是一种基于任务的 ...