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)的更多相关文章

  1. vue 时间选择器组件

    vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...

  2. 微信小程序 地区选择器 和省市县三级联动 和button按钮分享

    wxml代码: <view class="section__title"> 地区选择器 </view> <picker bindchange=&quo ...

  3. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  4. ant design vue 地区选择(级联)

    city.js const options = [ { value:'北京市', label:'北京市', children:[ { value:'北京市', label:'北京市', childre ...

  5. ant design vue 时间选择器只能到最大日期

    <a-date-picker :disabledDate="disabledEndDate"  style="width: 100%" placehold ...

  6. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  7. 【转载】 github vue 高星项目

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  8. VUE组件汇总

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  9. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  10. Vue开源项目汇总(史上最全)(转)

    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

随机推荐

  1. Ubuntu16.04LTS安装集成开发工具IDE: CodeBlocks 和Eclipse-cdt

    上文中,我们已经介绍了QT5.10.0在Ubuntu下的安装 https://www.cnblogs.com/si-lei/p/9240230.html, 接下来我们介绍CodeBlocks以及Ecl ...

  2. 一步步yum安装LNMP,脱坑笔记!!!

    更改国内yum源: 1.备份yum源文件,位置在/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/ ...

  3. shell-004:检测机器存活或者网络陡动情况!

    如下图情况,我们监测的就是此数据,当大于50%了,我们就可以设置告警等! #!/bin/bash # 用ping检测一台机器的存活或者网络波动情况 # 检测机器的丢包率来检测网络波动情况!! n=`p ...

  4. shell-002:统计IP访问量

    统计IP访问量 #!/bin/bash # 统计IP的访问量 # 第一步首先得获取到日志的IP # 第二步给IP排序,这样相同的的IP就会在一起 sort # 第三步则给重复的IP统计数量,去重 un ...

  5. 15. window.onload和$(function() { } )的区别

    window.onload和$(function() { } )的区别 1)执行时机不一样 $(function() { } )是在dom结构创建完成以后就执行,window.onload是在整个页面 ...

  6. Android 日历视图(Calendarview)

    1.介绍 2.常用属性 3.xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...

  7. 洛谷 P2680 运输计划(NOIP2015提高组)(BZOJ4326)

    题目背景 公元 \(2044\) 年,人类进入了宇宙纪元. 题目描述 公元\(2044\) 年,人类进入了宇宙纪元. L 国有 \(n\) 个星球,还有 \(n-1\) 条双向航道,每条航道建立在两个 ...

  8. Fountains(非线段树版(主要是不太会用))

    Arkady plays Gardenscapes a lot. Arkady wants to build two new fountains. There are n available foun ...

  9. UVA - 10125 哈希

    题意:求集合中最大的\(d\)使得\(a+b=d-c\) 学习一下哈希的姿势(原来所谓链地址法就是直接跑个图啊) 哈希真有趣,全靠xjb乱搞 就叫这套hash为xjb-fibonacci-lpy-ha ...

  10. UVALive - 5963 ad-hoc

    注意到合法条件是对称的,那很有可能与2有关, 小于2表示没有这一页,大于2表示冲突了 我也不知道这样做对不对的(输入范围很迷),试一下就A了... #include<bits/stdc++.h& ...