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实现省区市三级联动以及详细地址的输入的相关教程结束。