VUE-地区选择器(V-Distpicker)
V - Distpicker 地区选择器
环境问题不多说,自己看文档,主要讲一下在实际使用过程中如何将下拉框的值赋值到对象属性上.
文档: https://distpicker.pigjian.com/
github: https://github.com/jcc/v-distpicker
项目运用:
1.表单
<el-form-item label="地区">
<v-distpicker :province="user.xtrysf" :city="user.xtrycs" hide-area @province="onChangeProvince" @city="onChangeCity" >
</v-distpicker>
</el-form-item>
2.绑定下拉框
onChangeProvince(data) {
this.user.xtrysf = data.value
},
onChangeCity(data) {
this.user.xtrycs = data.value
}
当选中地区下拉框时,将选中的值赋值给表单(相应的对象属性值)
=====================
原文:https://blog.csdn.net/Dota2_TA/article/details/79015426
VUE-地区选择器(V-Distpicker)的更多相关文章
- vue 时间选择器组件
vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...
- 微信小程序 地区选择器 和省市县三级联动 和button按钮分享
wxml代码: <view class="section__title"> 地区选择器 </view> <picker bindchange=&quo ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- ant design vue 地区选择(级联)
city.js const options = [ { value:'北京市', label:'北京市', children:[ { value:'北京市', label:'北京市', childre ...
- ant design vue 时间选择器只能到最大日期
<a-date-picker :disabledDate="disabledEndDate" style="width: 100%" placehold ...
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- 【转载】 github vue 高星项目
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- Vue开源项目汇总(史上最全)(转)
目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
随机推荐
- 三种timer控件的简单实例
.system.windows.forms .system.threading.timer .system.timers.timer using System; using System.Collec ...
- 190221协程与IO模型
一.协程 又称微线程 协程是一种用户态的轻量级的线程 在单线程下实现的并发,例如:yield 优点: 无需线程上下文切换的开销 无需原子操作锁定及同步的开销 方便切换控制流,简化编程模型 高并发,高扩 ...
- layer mobile开发layer.full
Layer For Mobile 之 layer.full() 背景介绍:layer mobile是专门针对手机页面开发的一套框架,具体介绍请看官方文档 http://layer.layui.com/ ...
- Codeforces 1136D Nastya Is Buying Lunch (贪心)
题意: 给一个序列和一组交换序列(a,b),当且仅当a在b的前面(不允许有间隔),这两个数才能交换,问最后一个数最多能移动多少个位置. 分析: 这题是思路是十分的巧妙呀 , 用一个数组num[x] ...
- XAML 绑定和结构体不得不说的问题
遇见一个问题 如果用一个结构体struct.再用一个ListView,然后使用绑定. <Window x:Class="WpfApp1.MainWindow" xmlns=& ...
- npm install 卡住的时候的处理
[From] http://www.eguidedog.net/doc/what-to-do-when-npm-install-hangs.php 翻译一下,npm install 经常卡在下载某个包 ...
- 2019.3.13 Java的特性——继承
继承 面向对象编程(OOP)三大特征:继承,封装,多态 目的:为了减少重复代码,避免复制粘贴 创建父类Animal public class Animal { private String name; ...
- Android 自动分析apk加固方式
本实例只对apk中lib文件夹中的文件进行分析import java.io.File;import java.io.IOException;import java.util.ArrayList;imp ...
- Hadloop
Hadoop是分布式文件系统 并行处理系统:高效存储和高效处理组件 Mapreduce,函数式编程机制,分Map阶段和reduce阶段,他不但是一个编程方式,同时也是个运行框架,它分两个阶段 Map阶 ...
- ASP.Net Core 发布ABP项目遇到的错误
1.HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作 ...