vue+elementUI實現地址的三級地址級聯

之前做項目的時候有個需求是在form表單里插入三級地址級聯選擇，去網上找了一些插件，但沒有一個符合自己的需求，就嘗試自己去寫了下組件，效果還可以，具體如下：
首先，是頁面布局

<div id="comPCA">
  <!-- 省 -->
  <el-select
    placeholder="省"
    @focus="insertProvinceData()"
    v-model="formAddressData.province"
    @change="chooseProvince"
  >
    <template v-for="(item, index) in provinceData">
      <el-option
        :key="index"
        :label="item.label"
        :value="item.cityname"
      ></el-option>
    </template>
  </el-select>
  <!-- 市 -->
  <el-select
    placeholder="市"
    v-model="formAddressData.city"
    @change="chooseCity"
  >
    <template v-for="(item, index) in cityData">
      <el-option
        :key="index"
        :label="item.label"
        :value="item.cityname"
      ></el-option>
    </template>
  </el-select>
  <!-- 區 -->
  <el-select placeholder="區" v-model="formAddressData.area">
    <template v-for="(item, index) in areaData">
      <el-option
        :key="index"
        :label="item.label"
        :value="item.cityname"
      ></el-option>
    </template>
  </el-select>
</div>

然后是js部分，先看props

 props: ["allAddress", "modAddress"],

這里的allAddress用來接收從后台拿過來的地址數據，用來填充地址選項，modAddress用來接收從父組件傳過來的已創建的地址，用在修改功能
接下來是data

    // 省市區的數據選擇
    provinceData: [],
    cityData: [{ label: "", cityname: "" }],
    areaData: [{ label: "", cityname: "" }],
    // 該對象用來格式化以后拋給父組件
    formAddressData: {
      province: "",
      city: "",
      area: "",
    },

然后是剩下的代碼

methods: {
 // 插入省份數據
 insertProvinceData() {
   this.provinceData = this.allAddress;
 },
 // 省份選擇
 chooseProvince(value) {
   this.cityData = this.allAddress.filter((item) => {
     return value == item.cityname;
   })[0].children;
   this.formAddressData.city = "";
   this.formAddressData.area = "";
 },
 // 城市選擇
 chooseCity(value) {
   this.areaData = this.cityData.filter((item) => {
     return value == item.cityname;
   })[0].children;
   this.formAddressData.area = "";
 },
},
mounted() {
 // 將已有的地址填充到地址選擇器里，變量modAddress的格式是"XXX XXX XXX"
 if (this.modAddress != "") {
   let tmp;
   tmp = this.modAddress.split(" ");
   this.insertProvinceData();
   this.chooseProvince(tmp[0]);
   this.chooseCity(tmp[1]);
   [
     this.formAddressData.province,
     this.formAddressData.city,
     this.formAddressData.area,
   ] = [tmp[0], tmp[1], tmp[2]];
 }
},
watch: {
 // 深度監聽，當省、市、區三個值都被選擇的時候將其格式化成"XXX XXX XXX"這樣的字符串形式
 formAddressData: {
   handler() {
     if (!this.formAddressData.area) {
       this.$emit("formAddressData", "");
     } else {
       let tmp = "";
       let count = 0;
       for (let key in this.formAddressData) {
         if (count != 2) {
           tmp = tmp + this.formAddressData[key] + " ";
         } else {
           tmp += this.formAddressData[key];
         }
         count++;
       }
       this.$emit("formAddressData", tmp);
     }
   },
   deep: true,
 },
},