element-ui中的input实现模糊搜索
依赖input组件和Dropdown下拉菜单组件
//input组件
<el-input v-model="input" placeholder="请输入内容"></el-input>
//dropdown组件,因为我们的数据是从后台拿的,所以需要遍历el-dropdown数据
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
结合代码如下:
<el-dropdown @commond='searchCustomer' trigger='click'>
<el-input @input='changeCustomerName' v-model="form.customerName" placeholder="请输入内容"></el-input>
<el-dropdown-menu class='cardsersions-all' slot="dropdown" >
<el-dropdown-item
:commond='item',
:key='item.id'
v-for='item in headOptions'
>{{item.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
里面有一些没见过的事件名,如下:
dropdown组件
input
下面是剩下的代码:
data(){
return {
headCustomer :[],
customer:[],
form:{
customerName :""
}
}
},
mounted(){
//mouted加载的时候去后端获取模糊搜索的数据
findProduct().then((res) => {
this.customer = res
this.headCustomer = res
})
},
method:{
//用户点击菜单的时候
seachCustomer(item) {
this.form.customerName = item.name
},
//客户名称输input框改变时触发
changeCustomerName(){
this.headCustomer =this.$getSearch(
this.form.customerName,
this.customer
)
}
}
关于getSearch函数,是定义在jurisdiction.js文件当中
const getSearch=function(e,arr){
//e是搜索字段
//arr是数组
let all=e ?arr.filter(createFilter(e)):arr
return all
}
export {
getSearch
}
最后在main.js注册为全局的
Vue.prototype.$getSearch=getSearch