基于elementUI中级联选择器( el-cascader ),完成省市区三级联动并回显---更新

我以为你知道,我不知道你知道我知道的,你怎么知道我知道你知道的,我以为你会知道我知道的

二三级城市数据下载地址:https://github.com/541073028/country-data


<el-form-item label="研究院地址:" prop="selectedOptions">
    <el-cascader :options="options" v-model="selectedOptions" @change="handleChangeData" :separator="' '"></el-cascader>
    <el-input v-model="formCustom.Detail"></el-input>
</el-form-item>

引入数据:
import options from "../../util/country-level3-data.js";

data中:
selectedOptions: [], //存放默认值
options: options //存放城市数据也就是显示出来
formCustom:{
    Detail: "", //详细地址信息
    DetailMap: "", //城市地址详细地址拼接  
address:"",//省份城市 }

选地址并传值

// 触发三级联动 我们这是需要传字符串所以需要把数组转为字符串并用"/"间隔
handleChangeData(value) {
   this.formCustom.address = value.join("/");//获取到城市地址
}

//编辑接口
editList(){
     // 字符串拼接地址 详细地址 "\xa0"空格间隔
     this.formCustom.DetailMap += this.formCustom.address + "\xa0" + this.formCustom.Detail;  
     //传参 传过去就行了
     address: this.formCustom.DetailMap
}

回显

// 显示对应数据
showList() {
      const req = {传对应参数};
      gymnasiumLookVue(req).then(res => {
        if (res.data.code == "200") {
          this.introductionListLook = res.data.data.rows;
          this.introductionListLook.map(item => {
            // 地址回显
            // 切开省份地址和地址描述
            //通过刚才添加的空格把两者区分开 下标为0就是三级联动 ,为1就是三级联动后面的具体地址描述
            let addressData = item.address.split("\xa0");
            //三级联动的value要与label相同,所以不能有"/"切割开就好了
            let selectData = addressData[0].split("/");
            // 地址省份( 三级联动 )
            this.selectedOptions = selectData;
            // 省份城市后面的具体描述
            this.formCustom.Detail = addressData[1];

       // 如果有默认值不操作时把默认值传过去
             if (this.selectedOptions) {
              this.formCustom.address = this.selectedOptions.join("/");
            }

          });
        } else {
          return false;
        }
      });
    }
posted @ 2019-12-11 09:54  写手在作画  阅读(10494)  评论(1编辑  收藏  举报