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

<template>
  <div>
    <el-select
    :value="value"
      filterable
      remote
      reserve-keyword
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="changeValue"
    >
      <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 {
  props: ["commit", "number","value"],
  data() {
    return {
      options: [],
      list: [],
      loading: false,
      constant: this.number || 50,
      placeholder:placeholder[this.commit]
    };
  },
  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);

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

    },
    getOptions(query) {
      this.options = this.list.filter(item=>{
        return item.userName.toLowerCase().indexOf(query.toLowerCase())>-1
      })
    },
    changeValue(val){
       this.$emit("input", val);
    }
  },
  computed: {
    enumer() {
      return {
        setTeachers: "teachers",
        setEducations: "educations",
      };
    },
  }
};
</script>
<style lang="scss" scoped>
</style>