Vue element 关于下拉框输入模糊查询

最近做的页面跟UI沟通过以后希望在下拉框上做个能输入模糊查询提醒的功能。自己也参考了很多的资料最后做个总结，实现如下：

方法一：

1、效果图

2、实现代码

这里是应用了这一组件完成这个功能
HTML部分

JS部分
定义用于存储数据的两个数组

 data() {
    return {
       groupArr: [],
       groupList: [],
  }
},

设置一个深度监听listQuery.deptName

watch: {
    'listQuery.deptName': {
      deep: true,
      handler: function(newVal, oldVal) {
        this.groupArr = []// 这是定义好的用于存放下拉提醒框中数据的数组
        var len = this.groupList.length// groupList
        var arr = []
        for (var i = 0; i < len; i++) { // 根据输入框中的值进行模糊匹配
          if (this.groupList[i].name.indexOf(this.listQuery.deptName) >= 0) {
            arr.push({
              value: this.groupList[i].name,
              id: this.groupList[i].code
            })
          }
        }
        this.groupArr = arr
      }
    }
  },

在方法中获取

methods: {
    groupListMe() { 
      getDictInfo().then(res => { // getDictInfo()这里是调用后台接口
        if (res.data) {
          this.groupList = []
          this.groupArr = []
          this.groupList = res.data.list
          for (const item of this.groupList) {
            this.groupArr.push({
              value: item.name, //这里一定是value: '值'
              id: item.code
            })
          }
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    querySearchGroup(queryString, cb) {
      var groupArr = this.groupArr
      cb(groupArr)
    },
    selectGroup(val) {
      this.groupId = val.code
    },
}

方法二：

效果图

为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。

DeptOptions的内容是从接口中获取的。getDictInfo为调用接口的方法，关于详细请见关于Get类型接口以及关于Post类型接口。

getOptionsData() {
      getDictInfo().then(res => {
        this.DeptOptions = res.data.list
        console.log('treeList', this.DeptOptions)
      })
    },

3、总结

基本的实现就是如上步骤啦！如有错误请多指教
关于官方文档中el-autocomplete的用法
关于官方文档中el-select的用法

其他关于接口的问题可以参考我的其他文章噢 ~
谢谢浏览！点个赞再走吧~