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、效果

选择后会生成一个字符串
选择后会生成一个字符串


版权声明:本文为weixin_43873989原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。