后台admin省市县镇公共组件

项目场景：

后台管理系统省市县镇地区选择器公共组件

---

问题描述：

由于在后台系统中 用到的省市县镇这个组件的地方比较多，所以应当写成公共的组件
（不是级联 是用单项id的选择框加载下一级数据）

<template>
  <!-- 公共组件 --- 省市县镇 父组件需要给子组件传两个值 
  parentArr => 要反显的数组 
  [ {name: row.province, id: row.provinceId },
    { name: row.city, id: row.cityId },
    { name: row.county, id: row.countyId },
    { name: row.town, id: row.townId }, 
  ];
  ifshowList =>  布尔值   用来判断是新增还是修改


  子组件要给父组件传一个值  =>   provinceObj   
  以下的代码是子组件
-->
  <div>
    <el-select
      style="width: 150px; margin-right: 10px"
      v-model="province"
      value-key="id"
      @change="provinceChangeValue()"
      filterable
      placeholder="请选择省"
    >
      <el-option
        v-for="item in cityProvinceList"
        :key="item.id"
        :label="item.name"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select
      style="width: 150px; margin-right: 10px"
      v-model="city"
      value-key="id"
      @change="cityChangeValue()"
      filterable
      placeholder="请选择市"
    >
      <el-option
        v-for="item in cityList"
        :key="item.id"
        :label="item.name"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select
      style="width: 150px; margin-right: 10px"
      v-model="county"
      value-key="id"
      @change="countyChangeValue()"
      filterable
      placeholder="请选择县/区"
    >
      <el-option
        v-for="item in cityCountyList"
        :key="item.id"
        :label="item.name"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select
      style="width: 150px"
      v-model="town"
      value-key="id"
      filterable
      @change="townChangeValue()"
      placeholder="请选择镇/街道"
    >
      <el-option
        v-for="item in cityTownList"
        :key="item.id"
        :label="item.name"
        :value="item"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import {
  provinceList,
  cityList,
  countyList,
  townList,
} from "@/api/system/store";
export default {
  props: {
    parentArr: {
      type: Array,
      required: true,
    },
    ifshowList: {
      type: Boolean,
    },
  },
  data() {
    return {
      province: {},
      city: {},
      county: {},
      town: {},
      cityProvinceList: [], //省
      cityList: [], //市
      cityCountyList: [], //县
      cityTownList: [], //镇
      arr: [],
    };
  },
  watch: {
    parentArr: {
      handler(newV, oldV) {
        this.parentArr = newV;
        this.provinceList();
        this.province = this.parentArr[0];
        this.getCityList();
        this.city = this.parentArr[1];
        this.getCountyList();
        this.county = this.parentArr[2];
        this.getTownList();
        this.town = this.parentArr[3];
      },
    },
    ifshowList: {
      handler(newValue, oldValue) {
        this.ifshowList = newValue;
        if (this.ifshowList == true) {
          this.provinceList();
          this.province = "";
          this.city = "";
          this.county = "";
          this.town = "";
        }
      },
    },
  },
  created() {
    if (this.ifshowList) {
      //获取所有的省
      this.provinceList();
      this.province = "";
      this.city = "";
      this.county = "";
      this.town = "";
    } else {
      this.provinceList();
      this.province = this.parentArr[0];
      this.getCityList();
      this.city = this.parentArr[1];
      this.getCountyList();
      this.county = this.parentArr[2];
      this.getTownList();
      this.town = this.parentArr[3];
    }
  },
  methods: {
    //获取所有的省
    provinceList() {
      provinceList().then((res) => {
        this.cityProvinceList = res.data;
      });
    },
    provinceChangeValue() {
      this.city = {};
      this.county = {};
      this.town = {};
      this.arr = [];
      this.getCityList();
    },
    getCityList() {
      cityList(this.province.id).then((res) => {
        this.cityList = res.data;
        this.arr[0] = this.province;
        this.$emit("provinceObj", this.arr);
      });
    },

    cityChangeValue() {
      this.county = {};
      this.town = {};
      this.arr = [];
      this.getCountyList();
    },
    getCountyList() {
      countyList(this.city.id).then((res) => {
        this.cityCountyList = res.data;
        this.arr[0] = this.province;
        this.arr[1] = this.city;
        this.$emit("provinceObj", this.arr);
      });
    },
    countyChangeValue() {
      this.town = {};
      this.arr = [];
      this.getTownList();
    },
    getTownList() {
      townList(this.county.id).then((res) => {
        this.cityTownList = res.data;
        this.arr[0] = this.province;
        this.arr[1] = this.city;
        this.arr[2] = this.county;
        this.$emit("provinceObj", this.arr);
      });
    },
    townChangeValue() {
      this.arr[3] = this.town;
      this.$forceUpdate();
      this.$emit("provinceObj", this.arr);
    },
  },
};
</script>

<style>
</style>

以下代码是父组件

//组件
 <addressSelect
  @provinceObj="getAddressArr"
  v-bind:parentArr="arr"
  v-bind:ifshowList="ifshow"
  >
 </addressSelect>
	
 data(){
	return {
		arr: [],//要反显的数据后期传给子组件
      	ifshow: true,//告诉子组件是新增还是反显
	}
 }
 methods: {
 getAddressArr(val) {
   this.addressArr = val;//你选中省市县镇的所有数据，将来要传给后台用
 },
}

---

最后：

写的繁琐 凑合看吧 要啥自行车