dy-admin-manager/src/components/remote-search/index.vue

<template>
  <div>
    <el-select
    :value="value"
      filterable
      remote
      reserve-keyword
      clearable
      :multiple='multiple'
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="changeValue"
      :style="{width:this.selectWidt+'px!important'}"
    >
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.userName"
        :value="item.userId"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
const placeholder = {
  setTeachers: "请选择老师",
  setEducations: "请选乐团主管",
};
import { throttle, slice } from "lodash";
import selects from "@/store/modules/selects";
export default {
  name:'remote-search',
  props: ["commit", "number","value",'width','multiple'],
  data() {
    return {
      options: [],
      list: [],
      loading: false,
      constant: this.number || 50,
      placeholder:placeholder[this.commit],
      selectWidt:this.width || 180,
      isFirst:true
    };
  },
  async mounted() {
    await this.$store.dispatch(this.commit);

    this.list = this.selects[this.enumer[this.commit]];

    this.options =
      this.list.length <= this.constant
        ? this.list
        : slice(this.list, 0, this.constant);

    throttle(this.getOptions,800)('')

  },
  methods: {
    remoteMethod(query) {
      // throttle
      throttle(this.getOptions,800)(query)

    },
    getOptions(query) {
      this.options = this.list.filter(item=>{
         let flag = (query&&item.userName.toLowerCase().indexOf(query.toLowerCase())>-1) || item.userId == query
        if(this.multiple){

          return flag || this.value.includes(item.userId)
        }else{
           return flag || item.userId == this.value
        }

      })
    },
    changeValue(val){
      this.isFirst = false
       this.$emit("input", val);
       this.$emit("change",val)
    }
  },
  computed: {
    enumer() {
      return {
        setTeachers: "teachers",
        setEducations: "educations",
      };
    },
  },
  watch:{
    value:{
      immediate:true,
      deep:true,
      handler(val){
      if(val&&this.isFirst){
        throttle(this.getOptions,800)('')
      }
      }

    }
  }
};
</script>
<style lang="scss" scoped>
</style>