Element-ui的el-autocomplete的使用

el-autocomplete的简单使用及遇到的坑

// 使用
  <el-autocomplete
        clearable
        @clear="setBlur()"
        @input="handle"
        v-show="listType =='class'"
        v-model="search"
        :fetch-suggestions="querySearch"
        placeholder="请输入检索内容"
        :trigger-on-focus="false"
        @select="handleSelect"
      ></el-autocomplete>



methods: {
   setBlur() {
      //  在点击由 clearable 属性生成的清空按钮时，主动触发失去焦点，解决‘fetch-suggestions’输入建议不提示的bug
      document.activeElement.blur()
    },
    // 清空输入框页面重置
    handle (val) {
      if (val == '' ) {
        this.init() // 页面重置的代码
      }
    },
    //过滤项目和class
    async querySearch(queryString, cb) {
        if(queryString && queryString.length>0){
          this.search = queryString
          try {
            const data = await getAllClass(this.search) //search定义在data里
          // 赋值给建议列表，渲染到页面
            var list = data.list
            // 如果list.length等于0，则代表没有匹配到结果。手动给list添加一条提示信息
            if (list.length == '0') {
              list.push({
                id: '-1',
                value: '无匹配结果'
             })
            // 调用 callback 返回建议列表的数据
              cb(list);
            } else {
              list = list.map(item=>{
              return {
                value:`${item.projectName}`,
                id: `${item.id}`
              }
             })
            // 调用 callback 返回建议列表的数据
             cb(list);
            }
          } catch (error) {
            console.log(error)
          }
        }
     },
    // 选中 input 提示的某一条
    async handleSelect(item) {
      // item.id等于 -1时，代表没有匹配到任何结果
      if(item.id != -1){
        this.search = item.value
        const data = await getAllClassList(this.search)
        this.tablet = data.list  // 拿到数据进行渲染
      }
    },
}

未匹配到结果时，返回建议列表的数据没数据时闪一下的问题。

可以在拿到后端返回的数据时，判断数组长度，如果length为0，则代表没有匹配到结果。
手动给list添加一条提示信息，并在 handleSelect方法中，判断，点击的数据是否为手动添加的提示信息，如果不是，再携带数据去发送请求。
如果有更好用的方法，欢迎指点

image.png

击由 clearable 属性生成的清空按钮时产生的bug

在点击清空按钮时，继续输入检索内容，这时候发现没有继续触发事件。
解决方法：点击清空的叉叉之后，主动触发失去焦点。@clear="setBlur()"

最后编辑于：2021.03.10 13:25:14