【Vue】想要做一个带搜索框的下拉框？

想要一个这样的下拉框
【Vue】想要做一个带搜索框的下拉框？
可以用element做出来吗？

回答

<el-select v-model="value">

    <el-input v-model="keyWord" v-on:input="myfilter"></el-input>
    <el-option v-for="(item,index) in arr" :key="index" :value="item.id" :label="item.label"></el-option>
  </el-select>
  arr:[{
    id:1,
    label:'qqq'
  },{
    id:2,
    label:'www'
  },{
    id:3,
    label:'eee'
  }],
  basearr:[{
    id:1,
    label:'qqq'
  },{
    id:2,
    label:'www'
  },{
    id:3,
    label:'eee'
  }],
  createFilter(queryString) {
  return (restaurant) => {
    if(restaurant.label !== undefined) {
      return (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)
    } else {
      return (restaurant.indexOf(queryString) >= 0)
    }
  }
},
myfilter() {
  let queryString = this.keyWord
  let restaurants = this.basearr
  let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
  this.arr = results
}
(el-select 是自带 filterable 属性的，也可以不用自己封装)

看了下element ui select组件的源码，针对你的需求，目前element ui select组件是无法满足你的需求的，不过你可以改造一下element ui select组件的源码，又或者自己封装一个组件也是可以的。仿layui下拉框或许我写的这篇文章对你有一定的思路启示帮助。

如果非要用element得话 可以用input和select组合成 利用focus v-model 稍微改下样式就可以了

先试试用select远程搜索链接描述

以上是 【Vue】想要做一个带搜索框的下拉框？ 的全部内容， 来源链接： utcz.com/a/82094.html

回到顶部