VUE + Element UI 实现输入框的省市区3级联动以及回显

项目开发中需要，在此记录一下开发过程

1、安装组件

npm install element-china-area-data -S

2、在页面上添加引用

import {regionData,CodeToText,TextToCode} from 'element-china-area-data'

这里可以借鉴官网官方教程

3、控件编写

			<el-form-item label="地址信息">
                 <el-cascader
                    size="large"
                    :options="options"
                    v-model="selectedAddressOptions"
                    @change="handleChange">
                 </el-cascader>
              </el-form-item>

4、在js中的代码

在data中先定义2变量记录数据

export default {
  name: "",
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  components: { Treeselect },
  data() {
    return {

	//地址数据相关(主要添加这2个)
      options: regionData,
      selectedAddressOptions: []
      
      };
 }

在方法中定义触发方法handleChange ：

methods: {

	handleChange (value) {
        //我们选择地址后，selectedAddressOptions 会保存对应的区域码，
        //例如北京的区域码为'110000'
        //我们要取出区域码对应的汉字，就需要用CodeToText(区域码)进行输出
          var name = ''
          this.selectedAddressOptions.map(item => name += CodeToText[item] + '/')
          this.form.address=name;//更新表单的数据，以便保存更新
    }
}

5、如果是要修改，进行回显

在修改的触发事件中：

先获取地址字符串，分割，再转成地区编码

		var addressStr= new Array(); //定义一数组
        addressStr=(this.form.address).split("/"); //字符分割
        this.selectedAddressOptions=TextToCode[addressStr[0]][addressStr[1]][addressStr[2]].code;

6、效果

选择后会生成一个字符串