一、背景

在电商平台中一般会有更新用户个人信息的模块（见下图），在这个功能中，系统会要求用户填写省市区信息及详细地址，便于订单的准确配送。本文将通过Vue+SpringBoot来具体实现用户所在省市区信息的选择与保存。

二、Cascader 级联选择器

用户在选择省市区时，一般会选择省，再选择地市，最后选择区或县市。对于这种数据集合有清晰的层级结构，可以通过级联选择器逐级查看并选择。
我们直接使用Element-UI Cascader 级联选择器:

<el-cascader :options="options" clearable></el-cascader><script>export default {data() {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '设计原则',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反馈'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}...}]}}}
</script>

三、element-china-area-data省市区级联数据

有了级联选择器这个操作的控件，还要为级联选择器中填充省市区的数据，这里我们引入element-china-area-data组件，该组件可以为Cascader级联选择器提供国内省市区三级、二级联动的数据。
参考用法如下：

<template><div id="app"><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange"></el-cascader></div>
</template><script>import { regionData } from 'element-china-area-data'export default {data () {return {options: regionData,selectedOptions: []}},methods: {handleChange (value) {console.log(value)}}}
</script>

四、前端页面增加省市选择

有了级联选择器及数据，接下来就可以把省市区选择的操作嵌入到用户更信信息模块中了：

<template><div class="app-container"><el-row :gutter="20"><el-col :xs="24" :sm="24" :md="13" :lg="14" :xl="15"><!--    用户资料更新    --><el-card class="box-card"><el-tabs v-model="activeName"><el-tab-pane label="资料更新" name="first"><el-formref="form":model="form":rules="rules"style="margin-top: 10px"size="small"label-width="65px"><el-form-item label="昵称" prop="nickName"><el-input v-model="form.nickName" style="width: 35%" /><spanstyle="color: #c0c0c0; margin-left: 10px">用户昵称不作为登录使用</span></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="form.phone" style="width: 35%" /><spanstyle="color: #c0c0c0; margin-left: 10px">电话号码不能重复</span></el-form-item><el-form-item label="性别"><el-radio-group v-model="form.gender" style="width: 178px"><el-radio :label="1">男</el-radio><el-radio :label="2">女</el-radio></el-radio-group></el-form-item><el-form-item label="城市" prop="city" size="mini">// 省市区级联选择器<el-cascaderv-model="selectedOptions"size="mini":options="options"filterableclearablestyle="width: 250px"@change="handleChange"/></el-form-item><el-form-item label=""><el-button:loading="saveLoading"size="mini"type="primary"@click="doSubmit">更新信息</el-button></el-form-item></el-form></el-tab-pane></el-tabs></el-card></el-col></el-row></div>
</template><script>
import { mapGetters } from 'vuex'
import store from '@/store'
import { saveUser } from '@/api/user'
// 导入省市区数据组件
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
export default {name: 'Center',data() {return {// 存放用户信息form: {},// 将省市区数据赋给级联选择器options: regionData,// 存放用户选择后省市区的信息selectedOptions: [],}},computed: {...mapGetters(['user','baseApi'])},created() {store.dispatch('getInfo').then(() => {this.form = { id: this.user.id, nickName: this.user.nickName, gender: this.user.gender, phone: this.user.phone,province: this.user.province, city: this.user.city, country: this.user.country }if (this.form.country !== '') {this.selectedOptions = [TextToCode[this.form.province].code, TextToCode[this.form.province][this.form.city].code, TextToCode[this.form.province][this.form.city][this.form.country].code]} else {this.selectedOptions = [TextToCode[this.form.province].code, TextToCode[this.form.province][this.form.city].code]}})},methods: {// 省市区级联选择器选择后更新用户前端handleChange(value) {this.form.province = ''this.form.city = ''this.form.country = ''for (let i = 0; i < this.selectedOptions.length; i++) {if (i === 0) { this.form.province = CodeToText[this.selectedOptions[i]] }if (i === 1) { this.form.city = CodeToText[this.selectedOptions[i]] }if (i === 2) { this.form.country = CodeToText[this.selectedOptions[i]] }}},// 提交用户更新信息doSubmit() {if (this.$refs['form']) {this.$refs['form'].validate((valid) => {if (valid) {this.saveLoading = truesaveUser(this.form).then(() => {this.$notify({title: '更新成功',type: 'success',duration: 2500})store.dispatch('getInfo').then(() => { })this.saveLoading = false}).catch(() => {this.saveLoading = false})}})}}}
}
</script>

五、实现效果

六、前端源码

https://gitee.com/zhuhuix/startup-frontend
https://github.com/zhuhuix/startup-frontend

Vue实现省市区信息选择（附前端源码）相关推荐

案例:使用vue开发微信机器人聊天(附完整源码)
先看效果: 实现过程: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
VUE项目练习大全（附github源码）
vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习 ...
前后端分离工程实现（VUE、JAVA）、附全部源码
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 整个工程基本情况简述: 前端工程语言:vue (node.js) 后端工程语言:java (s ...
Ant Design Vue 表格内编辑（附完整源码及效果图）
效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: {customRender: '' } 实现完整代码: <template& ...
适合初学者练手的vue小商城项目（附github源码）
基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城,废话不多说,直接上截图! 链接:https://github.com/huangche007/v ...
vue.js实现的实名认证手机页面前端源码，代码完整
大家好,今天给大家介绍一款,vue.js实现的实名认证手机页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 带步骤提示(图2) 图2 带身份证验证(图3) 图3 带图片上传功能(图4) 图 ...
JavaScript实现SelectionSort选择排序算法（附完整源码）
JavaScript实现SelectionSort选择排序算法(附完整源码) Comparator.js完整源代码 Sort.js完整源代码 SelectionSort.js完整源代码 Compara ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
admui 如何选择适合我的前端源码？
我们目前提供了两种形式的前端源码,分别为"自动构建"和"基础源码",并且只能选择其中一个. 1)自动构建: 自动构建包含了 Gulp 自动化构建工具,您可以使用 ...
C++计算实时输入数据的统计信息实现算法(附完整源码)
C++计算实时输入数据的统计信息实现算法 C++计算实时输入数据的统计信息实现算法完整源码(定义,实现,main函数测试) C++计算实时输入数据的统计信息实现算法完整源码(定义,实现,main函数测 ...

Vue实现省市区信息选择（附前端源码）

文章目录

一、背景

二、Cascader 级联选择器

三、element-china-area-data省市区级联数据

四、前端页面增加省市选择

五、实现效果

六、前端源码

Vue实现省市区信息选择（附前端源码）相关推荐

最新文章

热门文章

Vue实现省市区信息选择（附前端源码）

文章目录

一、背景

二、Cascader 级联选择器

三、element-china-area-data省市区级联数据

四、前端页面增加省市选择

五、 实现效果

六、 前端源码

Vue实现省市区信息选择（附前端源码）相关推荐

最新文章

热门文章

五、实现效果

六、前端源码