1、效果图：

2、需求&实现：

输入条件 下面匹配查询到的数据有多少个 需要调用后端接口展示，后端查询到之后返回条数 前端展示

3、具体代码实现：

html： 图片需要自己根据实际情况增加  // 查询 重置 筛选  本文章只写查询 重置和更多筛选逻辑自行添加

           
                            
                 
{{item.queryType}}：0,spanNoData:Number(item.number)==0}">{{item.number}}条
               
               
                                                   
                                    
               
                           
                                             
                             
                                
                        
         

js代码逻辑

//接口需要自己引入 import { selectNum } from "@/api/xxxx" export default {     data() {       return {        searchFilterFlag: false,        visible: false,         //初始的一些查询条件        searchData: {         queryData: "",         orderByKeyWord: "",         ascOrDesc: "",         orderByRule: "",       },        queryDataLabel: "",        queryList: [         {           queryType: `查询条件1`,           queryParam: "workNo",           number: 0,         },         {           queryType: `查询条件2`,           queryParam: "personName",           number: 0,         },         {           queryType: `查询条件3`,           queryParam: "pmpName",           number: 0,         },         {           queryType: `查询条件4`,           queryParam: "phone",           number: 0,         },         {           queryType: `查询条件5`,           queryParam: "graduationInstitution",           number: 0,         },         {           queryType: `查询条件6`,           queryParam: "insurancesPlace",           number: 0,         },       ],       timer: null,       queryParam: "",       }     },     mounted() {         //增加一个全局监听 方便点击其他位置可以关闭el-popover         document.addEventListener('click', this.handleDocumentClick);     },     methods: {     //点击查询条件的每一条数据      linkageDivClick(item) {       this.visible = false;         // 我们需要把这个值给后端传过去       this.queryParam = item.queryParam;         // 原本的查询条件中 searchData 所有值需要置空       for (let key in this.searchData) {           this.searchData[key] = ""       }       this.searchData[item.queryParam] = this.queryDataLabel;         //去调用查询接口        this.getGridDataEvt('search', false)     },     openPopover() {       this.visible = true;       this.debouncedInput(this.queryDataLabel)     },     // 下拉框查询接口     debouncedInputApi(val) {       selectNum({ queryData: val }).then(res => {         if (res.code == 200) {           let data = res.data           this.queryList.forEach(item => {             for (let key in data) {               if (item.queryParam == key) {                 item.number = data[key]               }             }           })         } else {           this.$message.error('数据获取失败');         }       }).catch(err => {         this.$message.error(err.msg);       })     },     // 输入框触发     debouncedInput(val) {       clearTimeout(this.timer);       //   防抖       this.timer = setTimeout(() => {         this.debouncedInputApi(val)       }, 500);     },     },     beforeDestroy() {         //清除定时       clearTimeout(this.timer);         // 移除监听       document.removeEventListener('click', this.handleDocumentClick);     },  }

样式style  具体效果还是需要自己微调 

.topSearch {         height: 80px;         width: calc(100% - 20px);         display: flex;         align-items: center;         justify-content: center;         .top-search-group {           height: 40px;           width: 750px;           display: flex;           align-items: center;           span {             width: 100%;           }           ::v-deep .el-input__inner {             height: 40px;             border-radius: 4px 0 0 4px;           }           ::v-deep .el-input-group__append {             background: #0096f1;             color: #fff;           }           .searchBtn {             cursor: pointer;             background: #008ee4;             display: flex;             align-items: center;             justify-content: center;             border-radius: 0 4px 4px 0;           }           .iconBtn {             margin-left: 10px;             width: 42px;             height: 40px;             cursor: pointer;             background: #ffffff;             border-radius: 4px;             border: 1px solid #dcdfe6;             display: flex;             align-items: center;             justify-content: center;           }           .iconBtnShaixuan {             margin-left: 10px;             width: 42px;             height: 40px;             cursor: pointer;             background: #ffffff;             border-radius: 4px;             border: 1px solid #dcdfe6;             background: url("../../assets/images/shaixuan.png");             background-repeat: no-repeat;             background-position: center center;             &:hover {               background: url("../../assets/images/shaixuanClick.png");               background-repeat: no-repeat;               background-position: center center;             }           }           .active {             background: #ebf7ff;             border-radius: 4px;             border: 1px solid #cbebff;             display: flex;             align-items: center;             justify-content: center;             &:hover {               background: #ebf7ff;             }           }         }       }