VUE搜索模糊匹配
通过watch监听实现，首先获取列表所有对象，拼接成一维数组列表，把所有匹配的添加到展示列表中，具体匹配条件可以自定义
直接上代码

<template>
  <div class="main">
    <div class="body tab-one" v-show="tab == 1">
      <div class="search-modal" v-show="searchShow">
        <div class="search-list" v-for="item in newItems" :key="item.id" @click="searchSub(item)">{{item.label}}</div>
      </div>
      <el-form label-position="top" label-width="80px" :model="form">
        <el-form-item label="第一步、请选择要毕业的年级/班级">
          <el-input v-model="form.input" class="grade"></el-input><i class="el-icon-plus select"></i>
        </el-form-item>
        <el-form-item label="第二步、请点击立即毕业">
          <el-button class="btn">立即毕业</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

js

    data () {
      return {
        tab: 1,
        form: {
          input: '',
          ids: []
        },
        allItems: [],
        newItems: [],
        searchShow: false
      }
    },
    computed: {
      token () {
        return this.$store.state.login.token
      }
    },
    watch: {
      "form.input": {
        handler(newName, oldName) {
          let list = this.allItems;
          //console.log('all = '+JSON.stringify(list));
          let newList = [];
          list.forEach((item, index) => {
            //console.log(item)
            if (newName != '' && (item.label.indexOf(newName) !== -1 || item.label.indexOf(newName.toLowerCase()) !== -1)) {
              newList.push(item)
            }
          });
          this.newItems = newList;
          if(newList.length > 0){
            this.searchShow = true
          }else{
            this.searchShow = false
          }
          //console.log('new = '+JSON.stringify(newList));
          //this.newItems = this.allItems.filter((item) => {return item.label.indexOf(newName.toLowerCase()) !== -1})
        },
        immediate: true,
        deep: true
      }
    },
    created(){
      this.fetchData()
    },
    methods: {
      fetchData(){
        let that = this;
        let params = {
          "userToken": this.token,
          "data":{
            "showType": '1',//0人员和架构，1架构
            "orgTypes": '1'//1学生，2老师，3家长，12学生和老师，13学生和家长，23老师和家长
          }
        }
        this.http.post(this.api.wholeAll, params).then(
          res => {
            //console.log(res.data)
            function createList(roles) {
              roles.forEach((item) => {
                //一级目录
                let obj = {
                  id: item.id,
                  label: item.label,
                  nodeType: item.nodeType,
                  orgType: item.orgType,
                  level: item.level,
                }
                that.allItems.push(obj)
                if(item.hasOwnProperty('children') && item.children.length > 0){
                  //二级目录
                  console.log(0)
                  createList(item.children)
                }
              })
            }
            createList(res.data)
            //console.log('all = '+JSON.stringify(that.allItems))
          },
          error => {
            //console.log(error.message)
            that.$message({
              showClose: true,
              message: error.message,
              type: 'error',
              duration: 1500
            });
            if(error.code == 3 || error.code == 1){
              setTimeout(() =>{
                that.$router.push({path: '/'});
              },1500)
            }
          }
        )
      },
      searchSub(e){
        console.log('点击搜索 = ',e);
        let that = this;
        this.form.input = e.label
        setTimeout(() => {that.searchShow = false},500);
      },
    }

css

  .body {
    position: relative;
    padding: 20px;
    .search-modal {
      z-index: 2;
      position: absolute;
      top: 170px;
      left: 180px;
      width: 400px;
      max-height: 140px;
      border: 1px solid #0cb181;
      border-radius: 5px;
      background: #fff;
      overflow: auto;
      cursor: pointer;
      .search-list {
        padding: 10px;
        font-size: 14px;
        color: #606266;
        border-bottom: 1px dashed #ddd;
        &:hover {
          color: #0cb181;
        }
        &:last-child {
          border: none;
        }
      }
    }
    .el-button.el-button--default {
      color: #999;
      background-color: #fff;
      border-color: #eee;
    }
    .el-button.el-button--default:focus, .el-button.el-button--default:hover {
      background: #fff;
      border-color: #0cb181;
      color: #0cb181;
    }
    .el-button.btn {
      color: #fff;
      background-color: #0cb181;
      border-color: #0cb181;
    }
    .el-button.btn:focus, .el-button.btn:hover {
      background: #64CDAE;
      border-color: #64CDAE;
      color: #FFF;
    }
  }

看图