关于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