vue实现省市区三级联动
npm 安装
npm install v-distpicker --save
Vue全局引入组件
import Distpicker from 'v-distpicker' Vue.component('v-distpicker', Distpicker)
也可以那里需要,哪里引入
import VDistpicker from 'v-distpicker' export default {
components: { VDistpicker }
}
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
在声明vue实例的时候,定义 一个onSelected方法
<v-distpicker province="广东省" city="广州市" area="海珠区" @selected="onSelected"></v-distpicker> onSelected(data) {
this.address.province = data.province.value
this.address.city = data.city.value
this.address.county = data.area.value
},
vue实现省市区三级联动的更多相关文章
- vue 引用省市区三级联动(插件)
vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...
- vue 引用省市区三级联动(element-ui Cascader)
npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...
- vue 引用省市区三级联动(element-ui select)
npm 下载 axios npm install --save axios static 静态文件夹里 创建 json 文件夹 json 文件夹里创建 map.json map.json 文件里写 ( ...
- 基于Vue的省市区三级联动插件
官网地址:https://distpicker.uine.org/ 安装: npm install v-distpicker --save 局部注册: import VDistpicker from ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
- vue省市区三级联动
仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
- Vue 国家省市三级联动
在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
随机推荐
- 5. Java方法
5.Java方法 1.何谓方法 Java方法是语句的集合,它们在一起执行一个功能. 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 设计方法的原则:方法 ...
- Laravel-多条件检索方案
控制器 public function index(Request $request) { $status = $request->input('status'); $title = $requ ...
- 番茄钟的实现(基于Xilinx EGO1学习板)
番茄钟设计 一.总体设计 1.番茄工作法简介 番茄工作法由意大利的奇列洛创造.其内容就是:工作25分钟休息5分钟,循环四次后休息15分钟. 本项目就是基于Xilinx Ego1开发板实现一个计时器,该 ...
- 制作自己的rpm包,并为其制作patch包。
本文分为两个部分,第一部分是制作一个简单的自己的rpm包,并安装运行它.第二部分是为其制作一个patch包,并通过spec配置文件去打补丁,安装.运行打补丁后的程序. 一.安装工具 [yh@local ...
- docker学习笔记(3)- 镜像
简介 在docker学习笔记(1)- 架构概述一节中可以看到镜像是docker三大组件之一,可以将Docker镜像类比为虚拟机的模版. 镜像由多个层组成,每层叠加之后从外部看就像一个独立的对象,镜像的 ...
- 基于python 实现冒泡排序算法
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/11/17 14:42 # @Author : gylhaut # @Site ...
- mysql 创建临时表
创建临时表 create TEMPORARY table SalesSummary( product_name VARCHAR(50) NOT NULL, total_sales DECIMAL( ...
- 线性表是否为空,定位元素下标(基于c语言)
/*前面已经说过结构体中的n是代表已经放入线性表中元素的个数,所以判断线性表是否为空就是判断n的值是否为空*/ //书中代码如下 int isNullList_seq(PSeqList palist) ...
- Numpy库基础___一
ndarray一个强大的N维数组对象Array •ndarray的建立(元素默认浮点数) 可以利用list列表建立ndarray import numpy as np list =[0,1,2,3] ...
- python神器 Jupyter Notbook
python神器 Jupyter Notbook 简介 Jupyter Notebook是基于网页的用于交互计算的应用程序.其可被应用于全过程计算:开发.文档编写.运行代码和展示结果. Jupyter ...