省市联动选择器，地址选择，开箱即用

先上效果图，开箱即用



代码如下

<template>
  <!-- <select v-model="province" class="width_120">
    <option v-for="p in allCity" :label="p.province" :value="p.province"></option>
  </select>
  <select v-model="country" class="width_120">
    <option v-for="c in countries" :value="c">{{c}} </option>
  </select>
  <input v-model="detailedAdress" class="width_200 "> -->

  <el-select v-model="province" placeholder="请选择省份" size="mini" class="width_180">
    <el-option v-for="p in allCity" :label="p.province" :value="p.province"></el-option>
  </el-select>
  <el-select v-model="country" placeholder="请选择城市" size="mini" class="width_120">
    <el-option v-for="c in countries" :value="c"> </el-option>
  </el-select>
  <el-input  v-model="detailedAdress" size="mini" class="width_200 "></el-input>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from "vue";

export default defineComponent({
  setup(props, { emit }) {
    const state = reactive({
      province: '',
      country: '',
      detailedAdress: '',
	  allCity: [
       {
          province: "北京市",
          cities: [
            "东城区",
            "西城区",
            "朝阳区",
            "丰台区",
            "石景山区",
            "海淀区",
          ],
        },
        {
          province: "天津市",
          cities: [
            "和平区",
            "河东区",
            "河西区",
            "南开区",
            "河北区",
            "红桥区",
          ],
        },
      ],
      countries: [],
    });
      watch(() => [state.province, state.country], ([newprovince,newcountry],[oldprovince,oldcountry]) => {
      // 省份变化清空市级数据并重新刷新市级数据
        if(oldprovince !== newprovince) {
        const arr = state.allCity.filter((item) => item.province == state.province);
        state.countries = arr[0].cities;
        state.country = "";
        }
        // 省份和市级变化都会清空input内容
        state.detailedAdress = "";
      }
    );  

    return {
      ...toRefs(state),
    };
  },
});
</script>

由于数据太大，需要完整数据请评论私聊