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

<template>
   <el-select
      style="width:100%"
      ref="selectRef"
      filterable
      clearable
      remote
      :remote-method="queryData"
      v-model="svalue"
      :placeholder="placeholder"
      @blur="onBlur"
      @change="onChange"
      @focus="onFocus"
      @visible-change="reverseArrow"
      :disabled="disabled"
      >
        <el-option v-for="item in optionItems" :key="item.empName" :label="item.empName" :value="item.empName" ></el-option>
    </el-select>
</template>
<script>
  import emitter from 'element-ui/src/mixins/emitter';
  import { getSalemanList} from "@/api/emis/emisStaff";

  export default {
    name: "SalemanPicker",
    mixins: [emitter],
    props: {
      value: {
        type: [String],
        required: false
      },
      placeholder:{
        type: [String],
        required: false
      },
      disabled:{
        type: [Boolean],
        required: false,
        default:false,
      }
    },
    data() {
      return {
        optionItems: [],
        svalue: this.value,
        queryParams:{
          pageNum: 1,
          pageSize: 10,
        }
      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
      },
    },
    created() {
      // this.queryData();
    },
    mounted(){
      let rulesDom = this.$refs["selectRef"].$el.querySelector(".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"); // 找到dom
      rulesDom.classList.add("el-icon-arrow-up"); // 对dom新增class
    },
    methods: {
      onFocus(){
        this.queryData();
      },
      onBlur(val){
        this.$emit("input", this.svalue);
        this.dispatch('ElFormItem', 'el.form.blur');
      },
      onChange() {
        if(this.svalue!=null){
          this.$emit("input", this.svalue);

          this.$emit("change",this.svalue);
          this.$emit("onChange",this.svalue);
          this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
        }
      },
      queryData(val) {

        this.queryParams.searchValue=val;
        getSalemanList(this.queryParams).then(response => {
          this.optionItems =response.rows;
        });
      },
      reverseArrow(flag) {
        let rulesDom = this.$refs["selectRef"].$el.querySelector(
          ".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"
        ); // 找到dom
        if (flag) {
          rulesDom.classList.add("is-reverse"); // 对dom新增class
        } else {
          rulesDom.classList.remove("is-reverse"); // 对dom新增class
        }
      },
    }
  };
</script>