vue+element实现省区市三级联动以及详细地址的输入
Vue+elementui实现省区市三级联动+详细地址的输入
详细需求,需要手动更改用户所在的地址。
安装依赖项
npm install element-china-area-data -S
在组建中使用
import {regionData,CodeToText} from 'element-china-area-data'
代码示例
<template>
<el-form label-width="80px">
<el-form-item label="微信昵称">
<el-input v-model="nickName"></el-input>
</el-form-item> <el-form-item label="性别">
<el-select v-model="sex" placeholder="请选择性别">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item> <el-form-item prop="areaCode" label="所在地区" :label-width="formLabelWidth">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script> import {regionData,CodeToText} from 'element-china-area-data'
import axios from "axios"; export default {
name: 'weChatUserEditor',
data() {
return {
openId: '',
nickName: '',
sex: '',
options: regionData,
selectedOptions: [],
provinceName:'',
cityName:'',
countyName:''
}
}, mounted() {
this.openId = this.$route.query.openId
console.log(this)
},
created() {
// 初始化省市区
this.selectedOptions = [this.form.provinceCode, this.form.cityCode, this.form.areaCode];
},
methods: {
handleChange(value) {
//将区域码转为汉字
console.log(CodeToText[value[0]])
console.log(CodeToText[value[1]])
console.log(CodeToText[value[2]]) this.provinceName=CodeToText[value[0]]
this.cityName=CodeToText[value[1]]
this.countyName=CodeToText[value[2]]
},
onSubmit() {
console.log('submit!');
console.log(this) const variable={
openId:this.openId,
nickName:this.nickName,
gender:this.sex,
provinceName:this.provinceName,
cityName:this.cityName,
countyName:this.countyName
} let _this=this
axios({
method:'POST',
url:'http://localhost:1111/waimai/user/updateWeChatInfo',
headers:{
'Content-Type': 'application/json;charset=UTF-8'
},
data:JSON.stringify(variable)
}).then(function (res){
console.log(res);
_this.$notify({
title:'修改成功',
message:"正在返回微信用户信息列表",
type:'success',
duration:3000
}); _this.$router.push('/wxUserList')
})
},
}
}
</script>
控制台显示
vue+element实现省区市三级联动以及详细地址的输入的更多相关文章
- vue 使用element-ui实现城市三级联动
<template> <div> <el-select v-model="prov" style="width:167px;margin-r ...
- 用Vue.js来实现城市三级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue+element省市县的二级联动功能
项目中有选择省市县的需求,先选择省,再选择县 解决这个需求也不是很难,总体思路就是看后端接口, 一般后端接口都是请求参数为 0 返回省的数据,不为 0 的话返回相对应的市的数据 template代码: ...
- 省市区三级联动(vue)
vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"& ...
- wex5 实战 省市县三级联动与地址薄同步
无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2: 地址薄选项,利用inputSel ...
- 循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用
在很多应用中,往往都涉及到记录用户所在省份.城市.区县或者街道等信息,一般我们可以通过联动的Select或者类似的界面组件进行展示,或者使用Element中的el-cascader界面组件进行展示,而 ...
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- 用vue实现省市县三级联动
我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县 ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
随机推荐
- 同步(synchronized)
转载至:https://www.cnblogs.com/dolphin0520/p/3923737.html 一.什么时候会出现线程安全问题? 在单线程中不会出现线程安全问题,而在多线程编程中,有可能 ...
- MZY项目笔记:session歧路
from my typora MZY项目笔记:session歧路 文章目录 MZY项目笔记:session歧路 那该怎么办? 1. 手动加上cookie的header. 2.自己模拟一个Session ...
- SpringBoot 优雅配置跨域多种方式及Spring Security跨域访问配置的坑
前言 最近在做项目的时候,基于前后端分离的权限管理系统,后台使用 Spring Security 作为权限控制管理, 然后在前端接口访问时候涉及到跨域,但我怎么配置跨域也没有生效,这里有一个坑,在使用 ...
- CPF 入门教程 - 各个控件介绍(八)
CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...
- Vue.JS快速上手(组件间的通信)
前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...
- ES6扩展——对象的扩展(简洁表示法与属性名表达式)
1.简洁表达法. 当属性名与属性值相同时,可省略属性值:例如:{name : name}可以写成 {name} 属性方法中,可省略冒号与function,直接 属性名(){}即可.例如{say : f ...
- Javascirpt 面向对象总结-继承
JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 公有属性 this.name = name || ...
- leaflet加载离线OSM(OpenStreetMap)
本文为博主原创,如需转载需要署名出处. leaflet作为广为应用的开源地图操作的API,是非常受欢迎,轻量级的代码让使用者更容易操作. 废话不多说,下面直接给出范例. 首先在这个网站下载leafle ...
- Windows下Rancher复制Pod内文件到本地
Rancher 未提供直接获取 Pod 内文件的工具(如果有请评论告知下,蟹蟹),但提供了 Rancher 的 CLI 客户端,通过 CLI 可以调用 k8s 的 CLI (kubectl) 命令来操 ...
- 关于electron-vue打包后静态视频文件无法正常加载的问题解决方法
最近在使用electron-builder构建vue项目的时候发现在生产模式下视频可以正常加载并显示,但是一旦打包到开发环境下,视频就读取不出来了,控制台也并没有报错 一开始博主以为是路径问题,在将路 ...