refinery-admin/src/components/autocomplete/index.vue

<template>
  <el-select
    v-model="params[config.querykey]"
    filterable
    remote
    clearable
    reserve-keyword
    :placeholder="config.placeholder"
    :remote-method="remoteMethod"
    @clear="list = []"
    :disabled="isDisabled"
    @change="change"
  >
    <el-option
      v-for="(item, index) in list"
      :key="item.id + index"
      :label="item[config.labelKey]"
      :value="item[config.valueKey]"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    params: Object,
    config: Object,
    // config: {
    //   serveTarget: {}, // 远程搜索接口
    //   autocompleteKey: "", //远程搜索接口参数名
    //   labelKey: "", //接口返回数据label名
    //   valueKey: "", //接口返回数据唯一值
    //   querykey: "", //查询接口参数名
    // },
  },
  data() {
    return {
      text: "",
      list: [],
      isDisabled: false,
    };
  },
  watch: {
    "config.echoId": {
      handler(nval, oval) {
        if (nval) {
          this.remoteMethod(this.config.echoName);
        }
        this.isDisabled = !!this.config.isDisabled;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 远程搜索
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        let params = {};
        if (
          this.$utils
            .typeJudgment(this.config.autocompleteKey)
            .includes("Object")
        ) {
          params[this.config.autocompleteKey.key] = query;
          params["enableMark"] = this.config.autocompleteKey.enableMark;
        } else {
          this.config.autocompleteKey
            ? (params[this.config.autocompleteKey] = query)
            : (params["queryTypeGet"] = query);
        }
        this.config.serveTarget(params).then((res) => {
          let timeInstance = setTimeout(() => {
            this.loading = false;
            clearTimeout(timeInstance);
            if (res.data.length) {
              this.list = res.data;
            } else this.list = [];
          }, 1000 * Math.random());
        });
      } else {
        this.list = [];
      }
    },
    change(val) {
      this.$emit("change", val);
    },
  },
};
</script>

<style lang="scss" scoped></style>