上边是用法,下边有封装

<el-select v-model="province_id[index]" placeholder="请选择地区" 	
	@change="onChangeProvince($event,index)" clearable size="small">
            <el-option
              v-for="item in provinceList[index]"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>

//data
	 provinceList: [], //把获取的数据添加上
     province_id: [], //选择的id列表
     addressIdex_id:'', //最终提交的值
     address: {
       length: 1   //显示几个框
     }

//methods
    onChangeProvince(e, index) {
      //错选 重新选进入
      if (index !== 0 && this.provinceList[index + 1]) {
       //清除当前选择下拉框后边的值
        this.provinceList.splice(index + 1, this.provinceList.length)
        this.province_id.splice(index + 1, this.provinceList.length)
        getAddress({pid: e}).then(response => {
        //判断是否有数据
          if (response.data.length) {
          //有值显示下一个框
            this.address.length = index + 2
            this.provinceList.push(response.data)
          } else {
          //没有值不显示下一个框
            this.address.length = index+1
          }
        })
        //正常添加
      } else {
        getAddress({pid: e}).then(response => {
          if (response.data.length) {
            this.address.length += 1
            this.provinceList.push(response.data)
          }
        })
      }
      //赋值提交数据
      this.addressIdex_id = e
      
    },

封装组件

   <change-addresslinkage @chind-Addresslist="getAddressLinkageForm" 
    ref="addressLinkageForm"></change-addresslinkage>

    getAddressLinkageForm(data) {
      console.log(data, '父组件传的值')
      this.form.provinceId = data.id[0]
      this.form.cityId = data.id[1]
      this.form.districtId = data.id[2]
      this.form.townId = data.id[3]
    },
//重置子组件
this.$refs.addressLinkageForm.changeList()

//传值给子组件
 this.$refs.addressLinkageForm.changeListProveList(response.data)

<template>
  <div>
    <div style="margin-left: 10px;display: inline-block" v-for="(item ,index) in address.length" :key="index +'only'">
      <el-select v-model="province_id[index]" placeholder="请选择地区" @change="onChangeProvince($event,index)"
                 clearable
                 size="small">
        <el-option
          v-for="(item,idex) in provinceList[index]"
          :key="idex"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>

    </div>
  </div>

</template>

<script>
//请求数据的接口
import {getprovinceList} from "@/api/system/user"

export default {
  name: "index",
  props: {
  
    eindex: {
      type: [String, Object, Array,Number],
      default(){
        return 0
      }
    }
  },
  data() {
    return {
      address:{
        length: 1  //重置为一个下拉框使用
      },
      provinceList: [], //几级数据就有几个 数据对象 [{},{},{}]
      province_id: [0,0,0,0],  //省市区县的 id 用于修改
      addressIdex_id: '',
    }
  },
  created() {
  //请求数据的接口
    getprovinceList({pid: this.eindex}).then(response => {
      console.log(response, 'fanhuizhi-getAddress')
      this.address.length = 1
      this.provinceList.push(response.data)
    })
  },
  methods: {
    onChangeProvince(e, index) {
      //错选 重新选进入
      console.log
      (e, index, 'e,index', this.provinceList[index + 1])
      if (this.provinceList[index + 1]) {
        //清空
        console
          .log(this.provinceList.length, 'cuoxuan')
        this.province_id.splice(index + 1, this.provinceList.length)
        this.provinceList.splice(index + 1, this.provinceList.length)
        getprovinceList({pid: e}).then(response => {
          if (response.data.length) {
            this.address.length = index + 2
            this.provinceList.push(response.data)
          } else {
            this.address.length = index + 1
          }
        })
      } else {
        getprovinceList({pid: e}).then(response => {
          if (response.data.length) {
            this.address.length += 1
            this.provinceList.push(response.data)
          }
        })
      }
      this.addressIdex_id = e
      this.$emit('chind-Addresslist',{list:this.provinceList,id:this.province_id})
    },
    // 父组件重置调用
    changeList(){
      this.provinceList = []
      this.province_id = []
      this.addressIdex_id = ''
      this.address = {
        length: 1
      }
      this.getProviderType(this.eindex)
    },
    getProviderType(e) {
      getprovinceList({pid: e}).then(response => {
        console.log(response, 'fanhuizhi-getAddress')
        this.address.length = 1
        this.provinceList.push(response.data)
      })
    },
    removeByVal(arrylist, val) {
      for (var i = 0; i < arrylist.length; i++) {
        if (arrylist[i] === val) {
          arrylist.splice(i, 1);
          break;
        }
      }
    },
    //修改
    changeListProveList(data){
      console.log(data,'data-=-=---===')
      this.province_id =[]
      let letProvinceList = [0, 0, 0, 0]
      let letProvince_id = [0, 0, 0, 0]
      if (data.provinceId) {
        this.address.length += 1
        letProvince_id[0] = data.provinceId
        getprovinceList({pid: data.provinceId}).then(res => {
          letProvinceList[0] = res.data
        })
      }
      if (data.cityId) {
        this.address.length += 1
        letProvince_id[1] = data.cityId
        getprovinceList({pid: data.cityId}).then(res => {
          letProvinceList[1] = res.data
        })
      }
      if (data.districtId) {
        this.address.length += 1
        letProvince_id[2] = data.districtId
        getprovinceList({pid: data.districtId}).then(res => {
          letProvinceList[2] = res.data
        })
      }
      if (data.townId) {
        // this.address.length += 1
        letProvince_id[3] = data.townId
        getprovinceList({pid: data.townId}).then(res => {
          letProvinceList[3] = res.data
        })
      }
      // if (data.villageId) {
      //   letProvince_id[4] = data.villageId
      // }
      // if (!data.provinceId && !data.cityId && !data.districtId && !data.townId && !data.villageId) {
      if (!data.provinceId && !data.cityId && !data.districtId && !data.townId ) {
        console.log('000provinceList00', this.provinceList)
      } else {
        setTimeout(() => {
          this.removeByVal(letProvinceList, 0)

          for (let i = 0; i < letProvinceList.length; i++) {
            if (letProvinceList[i] !== 0) {
              this.provinceList.push(letProvinceList[i])
            }
          }
          for (let i = 0; i < letProvince_id.length; i++) {
            if (letProvince_id[i] !== 0) {
              this.province_id.push(letProvince_id[i])
            }
          }
          console.log(this.province_id)
          console.log(this.provinceList)

        }, 500)
      }

    },
  }
}
</script>

<style scoped>

</style>