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

一、背景

• 在电商平台中一般会有更新用户个人信息的模块（见下图），在这个功能中，系统会要求用户填写省市区信息及详细地址，便于订单的准确配送。本文将通过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-cascader
      size="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<