地区联动组件，选择非中国（CN），下拉换成input

<!--action:省市地址，普通组件-->
<template>
<div>
  <div class="addressBox" v-if="object.child">
    <template v-for="(item,index) in object.child">
      <span v-if="item.class=='country'" :key="'a'+index" 
        class="titleName">
        <label class="required-name" v-if="item.required">*</label>
        {{item.name}}
      </span>
      <!-- country -->
      <span style="float:left;" :class="item.class"
        :key='"b"+index'>
        <p class="name" v-if="item.class!='country'&&item.class!='street'">{{item.name}}</p>
        <template  v-if="item.xtype=='selectSearch'">
          <el-select  v-if="item.class=='country'" 
            :class="item.required?'is-required':''"
            :disabled="!edit||item.disabled"
            filterable
            v-model="objectValue[item.id]" 
            :placeholder="'请选择'"
            @change="(query)=>selectChangeFn(query,item)"
            popper-class="select-bak" 
            class="address-select ">
            <el-option
              v-for="ele in country"
              :key="'a'+ele.value"
              :label="ele.display"
              :value="ele.value">
            </el-option>
          </el-select>      
          <el-select 
            v-else-if="item.class=='province'"
            :disabled="!edit||item.disabled"
            :class="item.required?'is-required':''"
            filterable
            v-model="objectValue[item.id]" 
            :placeholder="'请选择'"
            @change="(query)=>selectChangeFn(query,item)"
            @visible-change="(query)=>getProvinceFn(query,item)"
            popper-class="select-bak" 
            class="address-select ">
            <el-option 
              v-for="ele in province"
              :key="'b'+ele.id"
              :label="ele.name"
              :value="ele.name">
            </el-option>
          </el-select>
          
          <el-select v-else
            :disabled="!edit||item.disabled"
            :class="item.required?'is-required':''"
            filterable
            v-model="objectValue[item.id]" 
            :placeholder="'请选择'"
            @change="(query)=>selectChangeFn(query,item)"
            @visible-change="(query)=>getCityFn(query,item)"
            popper-class="select-bak" 
            class="address-select ">
            <el-option 
              v-for="ele in city"
              :key="'c'+ele.id"
              :label="ele.name"
              :value="ele.name">
            </el-option>
          </el-select>
        </template>
        <template v-else>
          <el-tooltip class="item" effect="light" :content="objectValue[item.id]" placement="top" :disabled="!objectValue[item.id]||(objectValue[item.id]&&objectValue[item.id].length<25)">
            <el-input
              style="float:left"
              :class="item.required?'is-required':''"
              :placeholder="item.placeholder"
              v-model="objectValue[item.id]" 
              :disabled="!edit||item.disabled" :key='"c"+index'>
            </el-input>
          </el-tooltip>
        </template>
      </span>
    </template>
  </div>
  </div>
</template>
<script>
import { getDistrict} from "@/api/api";
export default {
  data() {
    return {
      province:[],
      nowCountry:'',
      oldProvince:'',
      city:[],
    };
  },
  props: {
      objectValue:Object,
      object:Object,
  },
  created() {
  },
  watch: {
    'infoData.state':{
      handler(val){
        if(this.objectValue[this.object.child[0].id]){
          this.changeXtype(this.objectValue[this.object.child[0].id],this.objectValue[this.object.child[0].id],'load')
        }
      },deep:true
    }
  },
  computed: {
    edit() {
      return this.$store.state.edit;
    },
    addressData(){
      return this.$store.state.regionalCascade;
    },
    country(){
      return this.$store.state.countryData;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.oldProvince = this.objectValue[this.object.child[1].id]
    },
    getCityFn(val,ele){
      let obj = []
      if(this.objectValue[this.object.child[0].id]=='CN'&&val){
        this.addressData.forEach(item=>{
          if(item.name==this.objectValue[this.object.child[1].id]){
            obj=item.children||[]
          }
        })
      }
      this.city = obj;
    },
    getProvinceFn(val,ele){
      let obj = []
      if(this.objectValue[this.object.child[0].id]=='CN'&&val){
        this.province = this.addressData
      }else{
        this.province = [];
        if(!val&&this.oldProvince!=this.objectValue[ele.id]) {
          this.oldProvince=this.objectValue[ele.id];
          this.$set(this.objectValue,this.object.child[2].id,'')
        }
      }
      this.city = obj;
    },
    selectChangeFn(val,item){
      if(item.class=='country'){
        if(val=='CN') {
          this.province = this.addressData
          this.changeXtype(val,'CN')
        }
        else {
          this.$set(this.objectValue,this.object.child[1].id,'')
          this.$set(this.objectValue,this.object.child[2].id,'')
          this.changeXtype(val,'other')
        }
      }
    },
    changeXtype(val,type,load){
      if(this.nowCountry==val) return;
      this.nowCountry = val
      this.object.child&&this.object.child.forEach((item,index)=>{
        if(index){
          if(item.class!='street'){
            if(type=='CN'){
              this.$set(item,'xtype','selectSearch')
            }else{
              this.$set(item,'xtype','input')
            }
          }
          if(!load) this.$set(this.objectValue,item.id,'')
        }
      })
    },
  }
};
</script>
<style lang="less">
.addressBox{
  overflow: hidden;
  .titleName{
    float:left;
    vertical-align:middle;
    line-height: 32px;
    margin-right: 15px;
    display: inline-block;
    text-align: right;
    width: 154px;
    color: #818ca8;
  }
  .country{
    width: 260px!important;
    margin-right: 10px;
    .el-select{width:100%!important;}
  }
  .province,.city{
    position: relative;
    display: block;
    width: 130px !important;
    margin-right:-3px;
    .el-select{width:100%!important}
    p.name {
      position: absolute;
      top: 6px;
      z-index: 10;
      right: 10px;
      background: #fff;
    }
  }
  .province{
    input{border-radius: 4px 0 0 4px !important;border-right-color: transparent;}
  }
  .city{
    input{border-radius:0 !important;border-left-color: transparent;border-right-color: transparent;}
  }
  .street{
    width:350px;
    input{
      border-radius: 0 4px 4px 0 !important;border-left-color: transparent;
      &:hover{
        border-left-color:#ACB5C2;
      }
    }
  }
  .province input,.city input,.street input{
    &:hover{
      border-color:#ACB5C2;
    }
    &:focus{
      border-color:#415fff;
    }
    &:hover,&:focus{
      position: relative;z-index: 1;
    }
  }
  >span>.formerror{
    border:0!important;
    input{
      border-color:red !important
    }
  }
}
</style>

{
    "id": "address",
    "disabled": false,
    "selectDetail": [],
    'child':[
      {
        "id": "Country",
        "defaultValue": null,
        "disabled": false,
        "name":"国家&地区",
        "placeholder": "国家/地区",
        "class":'country',
        "required": true,
        "selectDetail": [],
        "show": false,
        "span": 24,
        "xtype": "selectSearch"
      },
      {
        "id": "Province",
        "defaultValue": null,
        "disabled": false,
        "name":"省",
        "placeholder": "请输入",
        "class":'province',
        "required": true,
        "selectDetail": [],
        "show": false,
        "span": 24,
        "xtype": "selectSearch"
      },
      {
        "id": "City",
        "defaultValue": null,
        "disabled": false,
        "name":"市",
        "placeholder": "请输入",
        "class":'city',
        "required": true,
        "selectDetail": [],
        "show": false,
        "span": 24,
        "xtype": "selectSearch"
      },
      {
        "id": "DetailAddress",
        "defaultValue": null,
        "disabled": false,
        "name":"详细地址",
        "placeholder": "详细地址",
        "class":'street',
        "required": true,
        "selectDetail": [],
        "show": false,
        "span": 24,
        "xtype": "input"
      },
    ],
    "show": false,
    "span": 24,
    "xtype": "address"
  },

转载于:https://my.oschina.net/u/4099729/blog/3082167