1、效果图：
2、需求&实现：
输入条件 下面匹配查询到的数据有多少个 需要调用后端接口展示，后端查询到之后返回条数 前端展示
3、具体代码实现：
html： 图片需要自己根据实际情况增加 // 查询 重置 筛选 本文章只写查询 重置和更多筛选逻辑自行添加
<div
class="topSearch"
ref="topSearch"
>
<div class="top-search-group">
<el-popover
placement="bottom"
width="500px"
trigger="manual"
v-model="visible"
ref="popover"
popper-class="peopleSelectPopper"
>
<div
class="linkageDiv"
v-for="(item,index) in queryList"
:key="index"
>
<div @click="linkageDivClick(item)">{{item.queryType}}：<span :class="{spanData:Number(item.number)>0,spanNoData:Number(item.number)==0}">{{item.number}}</span>条</div>
</div>
<div
style="display:flex;"
slot="reference"
>
<el-input
width="500px"
placeholder="请输入查询条件1/查询条件2/查询条件3/查询条件4/查询条件5/查询条件6"
size="medium"
@input="debouncedInput"
@click.native="openPopover"
v-model="queryDataLabel"
ref="input"
>
</el-input>
<div
class="searchBtn"
style="font-size:20px;width: 46px;height: 40px;padding:0px"
@click="getGridDataEvt('search', true)"
>
<img
src="../../assets/images/search.png"
alt=""
>
</div>
</div>
</el-popover>
<div
class="iconBtn"
@click="getGridDataEvt('reset')"
>
<el-tooltip
class="item"
effect="dark"
content="重置"
placement="top"
>
<img
src="../../assets/images/chongzhi.png"
alt=""
></el-tooltip>
</div>
<el-tooltip
class="item"
effect="dark"
content="筛选"
placement="top"
>
<div
class="iconBtnShaixuan"
:class="{active:!searchFilterFlag}"
@click="searchFilterFlagClick()"
>
<img
v-if="!searchFilterFlag"
src="../../assets/images/shaixuanClick.png"
alt=""
>
</div>
</el-tooltip>
</div>
</div>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;
}
}
}
}
