关于elementui的input的autocomplete的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于elementui的input的autocomplete的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目中需要实现搜索框搜索时能自动提示可选项的功能，elementui的input组件有已经封装好的el-autocomplete可以使用，但是在使用中发现一些问题，记录一下

基础使用

// 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)
      },

自定义选项

// 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)
      },

需要注意的点

1、value-key="name"不能少，如果缺失会导致点击数据下拉选项后输入框无法赋值的情况
2、v-model="name"不能少，如果缺失会导致输入框无法赋值的情况
3、自定义选项需要注意，slot-scope的参数就是item文章来源地址https://www.toymoban.com/news/detail-649017.html

到了这里，关于关于elementui的input的autocomplete的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！