【element-ui笔记】element-ui中的input实现模糊搜索

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