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