ElementUI中el-select远程搜索 & 联想下拉功能优化

• 需求：根据用户输入的最少四位编码，联想带出完整的编码值。
• 思路：在编码的前四位发生变化时，才调用请求接口，避免实时请求编码数据（减少接口调用）。

模板部分

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading"
    class="select-demo"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

js部分

export default {
  data() {
    return {
      options: [],
      value: [],
      rootVal: "",
      rootList: [],
      curPromise: null,
      loading: false,
      states: [
        "0110A",
        "0110B",
        "0110C",
        "0110D",
        "0120K",
        "0120",
        "0120D",
        "0980",
        "0980H",
        "0980O",
        "0980A",
        "0980C",
      ],
    };
  },
  methods: {
    // 设置并获取对应的下拉项
    getOptions(rootList, query) {
      return rootList
        .filter((item) => item.toUpperCase().startsWith(query))
        .map((item) => ({ value: item, label: item }));
    },
    // 模拟接口调用
    getData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(
            this.states.filter((item) => item.toUpperCase().startsWith(this.rootVal))
          );
        }, 800);
      });
    },
    // request data
    async remoteMethod(query) {
      query = query.trim().toUpperCase();
      // 根据根查询
      if (query.length >= 4) {
        this.loading = true;
        // 收集/更新根
        if (!this.rootVal || !query.startsWith(this.rootVal)) {
          this.rootVal = query.slice(0, 4);
          this.rootList = [];
          this.curPromise = this.getData()
        }
        // 判断是否需要等待上一次最新的请求结果
        if (!this.rootList.length) {
          this.rootList = await this.curPromise;
        }
        this.options = this.getOptions(this.rootList, query);
        this.loading = false;
      } else {
        this.options = [];
      }
    },
  },
};