vue+element-ui 三级联动的使用及回显发送参数踩坑

萌萌踩坑记

已于 2023-08-14 10:18:14 修改

阅读量589

点赞数 1

文章标签： vue.js 前端 javascript elementui

于 2023-08-14 10:15:56 首次发布

本文链接：https://blog.csdn.net/weixin_73090675/article/details/132269979

版权

示例：

一、使用步骤：

1、下载依赖

npm install element-china-area-data -S

2、在js中引入

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

3、放入使用

HTML:

<el-cascader class="select"
   :disabled="disabled"
   size="large"
   :options="options"
   v-model="selectedOptions"
   @change="handleChange">
</el-cascader>

!注意，v-model绑定的值必须是options

JS:

data(){
    return{
     options: regionData,//使用中国省市区数组
     selectedOptions: [],//店铺地址数组
     personalForm: 
          {//表单
            lng: "", //经度 && 维度
            lat: "", 
            shopAdressProvince:"", //省市区名称
            shopAdressCity:"",
            adname: "", 
            prcode: "", //省市区code码
            citycode: "", 
            adcode:""
          ,
  }
}

//选择时
handleChange (value) {
// console.log(value)
  if (value[1] != null && value[2] != null) {
      var dz = CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' + 
CodeToText[value[2]]
  } else {
      if (value[1] != null) {
                  dz = CodeToText[value[0]] + '/' + CodeToText[value[1]]
             } else {
                  dz = CodeToText[value[0]]
             }
        }
  this.personalForm.provinces= CodeToText[this.selectedOptions[0]] //省
  this.personalForm.city= CodeToText[this.selectedOptions[1]]      //市
  this.personalForm.area= CodeToText[this.selectedOptions[2]]      //区
  const str = this.personalForm.provinces + '/' + this.personalForm.city + '/' + this.personalForm.area    // 新建一个字符串处理成后端需要的格式
  this.stationInfo.address = str   // 赋值给要发送的对象 结果："省/市/区"
},

踩坑（选择城市后组件不显示或者不回显但是能拿到值）：

如果v-model绑定的值直接是需要的数据(例如this.stationInfo.address)，那么选择城市后也不能回显，因为v-model绑定的值只有是数组的城市编码才能显示，所以，绑定的是需要是（ options: regionData,//使用中国省市区数组）才能显示，如需要汉字，则用CodeToText将城市编码转文字，再处理成后端需要的格式。

二、修改回显时

因为后端返回'省/市/区'，所以无法回显。拿到res时需要用到TextToCode将城市字符串转为编码再赋值给输入框。

 //转化区域码（拿到res后端返回的数据后）
var addressStr = res.data.data.address
var arr = addressStr.split("/");
var arrCode =TextToCode[arr[0]][arr[1]][arr[2]].code;
this.selectedOptions = arrCode;
console.log('aaaaaaaaaa',this.selectedOptions);