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

<template>
   <el-select
      filterable
      clearable
      v-model="svalue"
      :placeholder="placeholder"
      style="width: 100%;"
      @change="onChange">
        <el-option key="-1" label="全品牌" value="-1" ></el-option>
        <el-option v-for="item in optionItems" :key="item.code" :label="item.name+'('+item.nameEn+')'" :value="item.code" ></el-option>
    </el-select>
    <!-- <div >{{ item.name }}({{ item.nameEn }})</div> -->
</template>
<script>
  import { listSimpleEmisBrand} from "@/api/emis/emisBrand";

  export default {
    name: "EmisBrandPicker",
    props: {
      value: {
        type: String,
        required: false
      },
      placeholder:{
        type: String,
        required: false
      }
    },
    data() {
      return {
        optionItems: [],
        svalue: this.value,
        optionDefault:null,
        countryMap:new Map(),
      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
      },
      svalue(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.$emit("input", this.svalue);
        }
      }
    },
    created() {
      this.initData();
    },
    methods: {
      onChange() {
        this.$emit("input", this.svalue);
        let itemData ={};
        this.optionItems.forEach(item=>{
          if(item.code === this.svalue){
            itemData = item;
          }
        });
        this.$emit("onChange",itemData);
      },

      initData() {
        let queryParams = {};
        listSimpleEmisBrand(queryParams).then(response => {
          this.optionItems =response.rows;
        });
      },

    }
  };
</script>