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

<template>
   <el-select

      filterable
      clearable
      v-model="svalue"
      :placeholder="placeholder"
      :filter-method="dataFilter"
      @blur="onBlur"
      @change="onChange"
      >
        <el-option v-for="item in optionItems" :key="item.code" :label="item.name+'('+item.code+'-'+item.nameEn+')'" :value="item.code" ></el-option>
    </el-select>
    <!-- style="width:100%" -->
</template>
<script>
  import emitter from 'element-ui/src/mixins/emitter';
  import { listSimpleEmisCountry} from "@/api/emis/emisCountry";

  export default {
    name: "CountryPicker",
    mixins: [emitter],
    props: {
      value: {
        type: [String],
        required: false
      },
      placeholder:{
        type: [String],
        required: false
      }
    },
    data() {
      return {
        bakOptionItems:[],
        optionItems: [],
        svalue: this.value,
        optionDefault:null,
        countryMap:new Map(),
      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
      },
    },
    created() {
      this.initData();
    },
    methods: {
      onBlur(val){
        this.$emit("input", this.svalue);
        this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
      },
      onChange() {
        this.$emit("input", this.svalue);
        let itemData ={};
        this.optionItems.forEach(item=>{
          if(item.code === this.svalue){
            itemData = item;
          }
        });
        this.$emit("change",itemData);
        this.$emit("onChange",itemData);
        this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
        this.optionItems = this.bakOptionItems;
      },
      initData() {
        let queryParams = {};
        listSimpleEmisCountry(queryParams).then(response => {
          this.bakOptionItems =  response.rows;
          this.optionItems =this.bakOptionItems;
        });
      },
      dataFilter(val) {
        this.optionDefault = val

        if (val) {
          let searchVal = val.toLowerCase();
          this.optionItems = this.bakOptionItems.filter(item => {
            if (item.code.indexOf(searchVal) != -1 || item.name.toLowerCase().indexOf(searchVal) != -1 || item.nameEn.toLowerCase().indexOf(searchVal) != -1) {
              return true
            }
          })
        } else {
          this.optionItems = this.bakOptionItems;
        }
      },
    }
  };
</script>