Vue+elementui实现省区市三级联动+详细地址的输入

详细需求,需要手动更改用户所在的地址。

  1. 安装依赖项

    npm install element-china-area-data -S

  2. 在组建中使用

    import {regionData,CodeToText} from 'element-china-area-data'
  3. 代码示例

    <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>
  4. 控制台显示

vue+element实现省区市三级联动以及详细地址的输入的更多相关文章

  1. vue 使用element-ui实现城市三级联动

    <template> <div> <el-select v-model="prov" style="width:167px;margin-r ...

  2. 用Vue.js来实现城市三级联动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. vue+element省市县的二级联动功能

    项目中有选择省市县的需求,先选择省,再选择县 解决这个需求也不是很难,总体思路就是看后端接口, 一般后端接口都是请求参数为 0 返回省的数据,不为 0 的话返回相对应的市的数据 template代码: ...

  4. 省市区三级联动(vue)

    vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"& ...

  5. wex5 实战 省市县三级联动与地址薄同步

    无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2:  地址薄选项,利用inputSel ...

  6. 循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

    在很多应用中,往往都涉及到记录用户所在省份.城市.区县或者街道等信息,一般我们可以通过联动的Select或者类似的界面组件进行展示,或者使用Element中的el-cascader界面组件进行展示,而 ...

  7. 【巷子】---vue基于mint-ui三级联动---【vue】

    一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...

  8. 用vue实现省市县三级联动

    我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县 ...

  9. vue仿京东省市区三级联动选择组件

    工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...

随机推荐

  1. (2)hadoop之-----配置免密码登录

    ssh-keygen -t rsa 然后一路回车 在家目录下会生成 .ssh 目录           ls -la   查看 进入   .ssh            cd .ssh cp ~/.s ...

  2. MySQL基础——常用命令

    一.连接MySQL 1.启动mysql首先在打开cmd窗口,输入mysql -uroot -p ,然后空格进入MySQL控制台,MySQL的提示符是: mysql>. mysql -uroot ...

  3. 微信小程序从入门到实践(一)-设置底部导航栏

    微信小程序最多能加5个导航图标.因为我们只有两个默认页面,这里我们就添加两个导航图标 先看我们要达到的就是这么一个效果 接下来开始实践: (1)准备工作 找几个图标,将上述起好名字的图标 保存到 小程 ...

  4. vue element-ui el-date-picker 数据可以更改,但是前端不显示的更改后的数据问题

    template: <el-form-item label="有效时间:" prop="validTime">                    ...

  5. JDK1.8源码(六)——java.util.ArrayList类

    ArrayList实现了Serializable接口,因此它支持序列化,能够通过序列化传输,实现了RandomAccess接口,支持快速随机访问,实际上就是通过下标序号进行快速访问,实现了Clonea ...

  6. Shiro03

    1.shiro授权角色.权限 2.Shiro的注解式开发 shiro权限思路 授权 ShiroUserMapper中定义两个方法 // 通过用户ID查询角色 Set<String> get ...

  7. MongoDB(2)- 安装 MongoDB

    MacOS 安装 MongoDB 博主目前都用 mac 电脑练习,所以这里重点讲 MacOS 安装方式 系统要求 MongoDB 4.4 社区版支持 macOS 10.13 或更高版本 安装 Home ...

  8. 【死磕NIO】— NIO基础详解

    Netty 是基于Java NIO 封装的网络通讯框架,只有充分理解了 Java NIO 才能理解好Netty的底层设计.Java NIO 由三个核心组件组件: Buffer Channel Sele ...

  9. PPP协议、PPPoE协议、L2TP协议的关系

    1. 简述 首先对这3中协议做一个简单的描述: 协议 协议类型 描述 PPP 点对点链路层协议 应用最广泛的点对点协议,可应用在多种网络,改善了SLIP协议的不足 PPPoE 点对点链路层协议 对PP ...

  10. Coreos配置docker镜像加速器

    CoreOS配置docker镜像加速器 CoreOS下的Docker配置是通过flannel unit来实现的. 1) 通过命令 systemctl cat docker 可以看出配置文件的默认位置 ...