Sobre o uso do preenchimento automático da entrada do elementui

O projeto precisa implementar a função de solicitar automaticamente os itens opcionais ao pesquisar na caixa de pesquisa. O componente de entrada do elementui já foi empacotado el-autocomplete e pode ser usado, mas alguns problemas são encontrados durante o uso, portanto, registre-o

uso básico

// html部分
<el-autocomplete
              v-model="name"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入关键词"
        value-key="name"
        :trigger-on-focus="false"
        popper-class="autocompletePopper"
        :popper-append-to-body="false"
        class="my-autocomplete"
      >
      </el-autocomplete>
      // js部分
      querySearchAsync (queryStr, cb) {
    
    
        // 异步调用接口逻辑
        let results = 调用接口返回的数据中筛选出来的结果
        cb(results)
      },

opções personalizadas

// html部分
<el-autocomplete
              v-model="name"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入关键词"
        value-key="name"
        :trigger-on-focus="false"
        popper-class="autocompletePopper"
        :popper-append-to-body="false"
        class="my-autocomplete"
      >
        <template slot-scope="{ item }">
          <div class="custom-item" :title="item.name">
            {
    
    {
    
     item.name }}
          </div>
        </template>
      </el-autocomplete>
      // js部分
      querySearchAsync (queryStr, cb) {
    
    
        // 异步调用接口逻辑
        let results = 调用接口返回的数据中筛选出来的结果
        cb(results)
      },

Pontos a observar

1. O value-key="name" não deve estar faltando. Se estiver faltando, a caixa de entrada não pode ser atribuída a um valor depois de clicar na opção suspensa de dados. 2. O
v-model="name" não deve ser faltando. Se estiver faltando, a caixa de entrada não pode receber um valor.
3 , Opções personalizadas precisam prestar atenção, o parâmetro do escopo do slot é item