emis-frontend/src/views/emis/EmisBaseTools/DistrictPicker.vue

<template>
      <el-select
      style="width:100%"
      filterable
      clearable
      v-model="svalue"
      :placeholder="placeholder"
      @change="onChange"
      @click.native="onClick"
      >
      <el-option v-for="item in optionItems" :key="item.regionCode" :label="item.regionName" :value="item.regionCode" />
    </el-select>
</template>
<script>
  import { listSimpleEmisRegion } from "@/api/emis/emisRegion";

  export default {
    name: "DistrictPicker",
    props: {
      value: {
        type: String,
        required: false
      },
      parentCode: {
        type: String,
        required: false
      },
      placeholder: {
        type: String,
        required: false
      }
    },
    data() {
      return {
        svalue: this.value,
        optionItems: [],
        // 缺省值
        defaultItems: null,
      };
    },
    watch: {
      value(newVal,oldVal) {
        // if(this.value!=null){
        //   // 判断默认值中是否存在，若存在则不继续查询
        //   if(this.optionItems){
        //       let selItem = this.optionItems.find(item => item.regionCode == this.svalue);
        //       if(selItem){
        //         return;
        //       }
        //   }

        // }
        this.svalue=this.value;
        this.queryData(null,this.svalue);
      },
      parentCode(newVal,oldVal) {
        if(newVal!=oldVal){
            this.defaultItems=null;
        }
      }
    },
    created() {
      // if(this.svalue!=null){
      // }
      this.queryData(null,this.svalue);
    },
    methods: {
      onClick(){
        // 第一次点击时需要初始化
        if(!this.defaultItems){
          this.queryData(null,null);
        }else{
          this.optionItems = [...this.defaultItems];
        }
      },
      onChange() {
        this.$emit("input", this.svalue);
        this.$emit("onChange");
      },
      queryData(val,key) {
        this.optionItems =[];

        let queryParams = {
          parentCode:this.parentCode,
          regionCode:key,
          regionType:3
        };
        listSimpleEmisRegion(queryParams).then(response => {
          this.optionItems = response.rows;
          // 初始值存储
          if(key==null && val==null){
            this.defaultItems=[...this.optionItems]
          }
        });
      },

    }
  };
</script>