Vue elementui省市区组件封装

1 创建area.vue放在components文件夹中,代码如下

<template>
    <div>
        <el-form-item
          :prop="areaItemName.area"
          label="所属地区"
          :label-width="itemCfg.labelWidth"
          class="inline-item city"
        >
          <el-select
            v-model.number="areaForm.city"
            :loading="cityLoading"
            @change="cityChange"
            placeholder="区/县"
            clearable
            :style="{ width: itemCfg.inputWidth }"
          >
            <el-option
              v-for="cty in cityList"
              :key="cty.id"
              :label="cty.areaname"
              :value="cty.id"
            >
            <template v-if="cityLoading" slot="prefix">
                <i class="el-icon-loading"></i>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :prop="areaItemName.street"
          label-width="20px"
          class="inline-item street"
        >
          <el-select
            v-if="!isView"
            v-model.number="areaForm.street"
            :loading="streetLoading"
            @change="streetChange"
            placeholder="街道/镇"
            clearable
            :style="{ width: itemCfg.inputWidth }"
          >
            <el-option
              v-for="cty in streetList"
              :key="cty.id"
              :label="cty.areaname"
              :value="cty.id"
            >
            <template v-if="streetLoading" slot="prefix">
                <i class="el-icon-loading"></i>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :prop="areaItemName.village"
          label-width="20px"
          class="inline-item village"
        >
          <el-select
            v-model.number="areaForm.village"
            :loading="villageLoading"
            @change="villageChange"
            placeholder="村/社区"
            clearable
            :style="{ width: itemCfg.inputWidth }"
          >
            <el-option
              v-for="cty in villageList"
              :key="cty.id"
              :label="cty.areaname"
              :value="cty.id"
            >
            </el-option>
            <template v-if="villageLoading" slot="prefix">
              <i class="el-icon-loading"></i>
            </template>
          </el-select>
        </el-form-item>
    </div>
</template>

<script>
    import { getAreaListByCode } from "api/common";  //省市区接口
    export default {
      name: "areaFormItem",
      props: {
        areaForm: {
          type: Object,
          default: () => {
            return {
              city: "",//区县ID
              street: "",//街道ID
              village: "",//村庄ID
              cityName: "",//区县名字
              streetName: "",//街道名字
              villageName: ""//村庄名字
            };
          }
        },
        itemCfg: {//基础配置
          type: Object,
          default: () => {
            return {
              inputWidth: "110px",//默认input宽度
              labelWidth: "90px" //label宽度
            };
          }
        },
        // 配置字段名称
        areaItemName: {
          type: Object,
          default: () => {
            return {
              area: "area", // 区
              street: "street", // 街
              village: "village" // 村
            };
          }
        }
      },
      computed: {
     
      },
      created() {
        this.resetFormItemVal();
        this.getCityList();
      },
      data() {
        return {
          cityLoading: false,
          streetLoading: false,
          villageLoading: false,
          cityList: [],
          streetList: [],
          villageList: []
        };
      },
      methods: {
        async getCityList() {
          const cityCode = 330300;
          try {
            this.cityLoading = true;
            let { data } = await getAreaListByCode(cityCode);
            this.cityList = data;
            this.cityLoading = false;
          } catch (error) {
            this.cityLoading = false;
          }
        },
        toNum(val) {
          if (val && !isNaN(val)) {
            return Number(val);
          } else {
            return "";
          }
        },
        resetFormItemVal() {
          this.areaForm.city = this.toNum(this.areaForm.city);
          this.areaForm.street = this.toNum(this.areaForm.street);
          this.areaForm.village = this.toNum(this.areaForm.village);
        },
        async cityChange(code, flag) {
          this.$emit("getAreaCode", { key: "city", code });
          !flag && this.resetFormItem(1);
          if (!code) return;
          try {
            this.streetLoading = true;
            let { data } = await getAreaListByCode(code);
            this.streetList = data;
            this.streetLoading = false;
          } catch (error) {
            this.streetLoading = false;
          }
        },
        async streetChange(code, flag) {
          this.$emit("getAreaCode", { key: "street", code });
          !flag && this.resetFormItem(2);
          if (!code) return;
          try {
            this.villageLoading = true;
            let { data } = await getAreaListByCode(code);
            this.villageList = data;
            this.villageLoading = false;
          } catch (error) {
            this.villageLoading = false;
          }
        },
        villageChange(code) {
          this.$emit("getAreaCode", { key: "village", code });
        },
        resetFormItem(type) {
          if (type && type == 1) {
            this.areaForm.street = "";
            this.areaForm.village = "";
            this.streetList = [];
            this.villageList = [];
          } else if (type && type == 2) {
            this.areaForm.village = "";
            this.villageList = [];
          } else {
            this.areaForm.city = "";
            this.areaForm.street = "";
            this.areaForm.village = "";
    
            // this.cityList = [];
            this.streetList = [];
            this.villageList = [];
          }
        }
      }
    };
    </script>

2.组件调用

<template>
    <div>
    <Area-form-item
            ref="areaFormItem"
            :itemCfg="{
            inputWidth: '150px',
            labelWidth:'90px'
            }"
            @getAreaCode="getAreaCode"
        />
    </div>

</template>
<script>
import AreaFormItem from "/components/area";
export default{
    data(){
        return{
            search: {
                area: "",
                street: "",
                village: "",
            },
        }
    },
    components:{
        AreaFormItem
    },
    methods:{
    getAreaCode(area){
        switch (area.key) {
                case "city":
                this.search.area = area.code;
                this.search.street = "";
                this.search.village = "";
                break;
                case "street":
                this.search.street = area.code;
                this.search.village = "";
                break;
                case "village":
                this.search.village = area.code;
                break;
            }
        }
    }
   
}


</script>