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和 ...
随机推荐
- DOM操作技术之动态脚本与动态样式(兼容版)
动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...
- centos7用docker安装mysql5.7.24后配置主从
1)使用docker安装完成mysql5.7.24,我规划的是3台: 192.168.0.170(Master) 192.168.0.169(Slave) 192.168.0.168(Slave) 2 ...
- Python DataFrame 如何删除原来的索引,重新建立索引
删除行索引重排: ser.reset_index(drop = True) df.reset_index(drop = True) ---------------------------------- ...
- [转]Why you shouldn't use set (and what you should use instead)
Why you shouldn't use set (and what you should use instead) --- stl::set和sorted ector对比Matt Austern ...
- Python开发MapReduce系列(一)WordCount Demo
原创,转发请注明出处. MapReduce是hadoop这只大象的核心,Hadoop 中,数据处理核心就是 MapReduce 程序设计模型.一个Map/Reduce 作业(job) 通常会把输入的数 ...
- 获取select text 值 得获取选中的option
$("#magSeaTypeSelect option:selected").text();
- origin横纵坐标颠倒
origin默认是只能多个纵坐标,不能多个横坐标,所以这种情况只能先作成多个Y,然后像这样exchange一下.
- web 前端提交方式
1.get提交 如: <a href="actions/Student_Add?name=a&age=8">路径问题说明add</a>< ...
- archlinux升级firefox的flash插件
参考:http://blog.csdn.net/kingolie/article/details/53066415 1. 在https://get.adobe.com/flashplayer/下载文件 ...
- mac上k8s学习踩坑
本文学习k8s参考内容:http://docs.kubernetes.org.cn/126.html,学习过程中遇到一些坑,记录如下: -------------------------------- ...