vue模糊查询

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zjl199303/article/details/82585470

vue+element

<div class="searchbox">
      <el-autocomplete
           v-model="accountSearch"
           :fetch-suggestions="accounQuerySearchAsync"
           @select="accountHandleSelect"
           :debounce=10
            placeholder="请输入身份证号/姓名/部门"
       >
      </el-autocomplete>
      <el-button @click="accountFind">搜索</el-button>
</div>

data() {
    return {
          accountSearch: "",
    }
}，
method: {
    //queryString 为在框中输入的值    callback 回调函数,将处理好的数据推回
    accounQuerySearchAsync(queryString, callback) {
         let list = [{}];
         let param = {
              pageNum: 1,
              pageSize: 9999,
              key: queryString
         }      
         let data = ["Alabama","Alaska","Arizona","QQa","电饭锅的a广泛地","43543我a们是蛋糕",,
                     "wthdfbfgjtaytyut","是的sdfdfgdgdfgerauaiol","宿舍a的发v","哦们是对方a水电费                    是","脂肪s酸该公司","是的个人特a色的若干",];     
//      let data = this.getAccountUserInfo(param,0);
        data.forEach(function(item,i){
              if(item.indexOf(queryString) != -1){
                    list.push({"value":item});   
              }      
        })
        if(!queryString){
              list = list.splice(0,7);
        }
        callback(list);
    },
    // 模糊查询下拉框 鼠标键盘选中点击触发
    accountHandleSelect(item) { 
         this.accountSearch = item.value;
    },     
    accountFind: function(){
         if(!this.accountSearch){
               this.$message({ type: 'warning', message: "请输入要查询的内容！"});
                     return;
               }
          let param = {
               pageNum: 1,
               pageSize: this.accountPagesize,
               key: this.accountSearch
          }
          this.getAccountUserInfo(param,1);
    },
    getAccountUserInfo: function(param,status){
         findUsersAndDepartment(param).then((data) => {
               if(data.ret.succeed){
                     if(status == 0){             // 模糊查询
                           return data;
                      }else if(status == 1) {       // 获得表格数据
                           this.$message({
                                type: 'info',
                                 message: data.ret.retMsg
                            });
                                 this.accountList = data.page.list;
                      }
               }      
         })

   },

}

<style lang="scss" scoped>
       @import '~scss_vars';
        .searchbox {
            display: inline-block;
            width: 250px;
            .el-select,.el-autocomplete {
                float: left;
                input {
                    padding: 0 10px;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
            }
            .el-button {
                float: left;
                margin: 0; 
                border-left: 0;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                &:hover,&:focus {
                    border: 1px solid #bfcbd9;
                    border-left: 0;
                    color: #1f2d3d;
                }
            }
        }

       .search {
              display: block;
       }
       .btn-import {
              position: relative;
              input {
                      position: absolute;
                      z-index: 10;
                      left: 0;
                      top: 0;
                      width: 100%;
                      height: 100%;
                      opacity: 0;
                      fill-opacity: 0;
                      cursor: pointer;
              }
       }
</style>
       .search {
              display: block;
       }
       .btn-import {
              position: relative;
              input {
                      position: absolute;
                      z-index: 10;
                      left: 0;
                      top: 0;
                      width: 100%;
                      height: 100%;
                      opacity: 0;
                      fill-opacity: 0;
                      cursor: pointer;
              }
       }
</style>