vue中使用element ui的input做模糊查询的爬坑记录

关于element ui模糊搜索的问题

element ui官网关于input框的模糊搜索没有过于多的解释，在使用的过程中或多或少都会出现一些想拿一些值拿不到的情况。

官网给出的例子是这样的：

在template里面：

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>

在data中

data() {
      return {
        restaurants: [],
        state: '',
        timeout:  null
      };
    },

在methods中

querySearchAsync (queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      cb(results)
    },
    createStateFilter (queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    },
    handleSelect (item) {
      console.log(item)
    },

具体的可以在elementui官网查看

当需求出现由v-for生成多个组件的时候，而element ui提供的这个组件只能取到数据的value值，虽然在handleSelect中能取到当前选中数据的每一个值，但是对于有的时候需要用到index的时候怎样把index传进去呢？

经试验@select="handleSelect(item, index)"这样直接把index传入是不行的，而需要这样@select="(item) => { handleSelect(item, index); }"然后在handleSelect中就能取到index了

参考资料：https://yuyuye958.github.io/2019/03/10/el-autocomplete/

欢迎大家评论自己在使用element ui的时候都遇到什么困惑，我们一起聊聊。