后台管理系统多是以表格和表单为主，有列表就一定会有列表的筛选功能，所以在此把列表头部的搜索功能拆分出一个公共组件，方便使用。

大致样式如下图：

这里我使用的是ng-zorro蚂蚁金服的angular组件库

index.html:

<div nz-form class="ant-advanced-search-form"><nz-row [nzGutter]="24"><nz-col [nzSpan]="8" *ngFor="let item of columns, let i=index" [style.display]="(i>2 && !expandForm) ? 'none' : 'block'"><nz-form-item nzFlex><nz-form-label style="min-width: 20%;">{{item.label}}</nz-form-label><nz-form-control><input nz-input [(ngModel)]="searchData[item.key]" placeholder="请输入" *ngIf="item.type === 'input'"><nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请选择" *ngIf="item.type === 'select'"><nz-option *ngFor="let son of item.data; let idx = index" [nzLabel]="son.label" [nzValue]="son.value"></nz-option></nz-select><nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请选择" *ngIf="item.type === 'gender'"><nz-option nzLabel="女" nzValue=0></nz-option><nz-option nzLabel="男" nzValue=1></nz-option></nz-select><nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'operator'"nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch($event)" (ngModelChange)="changeOption($event)"><ng-container *ngFor="let opt of operatorOptions"><nz-option [nzValue]="opt" [nzLabel]="opt.name + '-'+ opt.user_type"></nz-option></ng-container></nz-select><nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'merchant'"nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_merchant($event)"><ng-container *ngFor="let opt of merchantOptions"><nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option></ng-container></nz-select><nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'client'"nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_client($event)"><ng-container *ngFor="let opt of clientOptions"><nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option></ng-container></nz-select><nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'admin'"nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_admin($event)"><ng-container *ngFor="let opt of adminOptions"><nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option></ng-container></nz-select><nz-date-picker *ngIf="item.type === 'date'" [(ngModel)]="searchData[item.key]"></nz-date-picker></nz-form-control></nz-form-item></nz-col><nz-col [nzSpan]="8" style="text-align: left;" [hidden]="filterLength >= 3"><button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()">查询</button><button nz-button type="reset" (click)="resetData()" class="mx-sm">重置</button></nz-col></nz-row><nz-row [hidden]="filterLength < 3"><nz-col [nzSpan]="24" style="text-align: right;"><button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()">查询</button><button nz-button type="reset" (click)="resetData()" class="mx-sm">重置</button><a (click)="expandForm = !expandForm" *ngIf="filterLength > 3">{{expandForm ? '收起' : '展开'}}<i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i></a></nz-col></nz-row>
</div>

index.ts:

import { OnInit, Input, Output, Component, EventEmitter } from '@angular/core';
import { _HttpClient } from '@delon/theme';@Component({selector: 'search-filter',templateUrl: './index.html',styleUrls: ['./index.less']
})export class SearchFilterComponent implements OnInit {@Input() columns;@Input() loading;@Output() toSearch = new EventEmitter<Object>();constructor(private httpClient: _HttpClient,) { }searchData: any = {page: 1,limit: 15};filterLength = 0;operatorOptions = [];merchantOptions = [];clientOptions = [];adminOptions = [];ngOnInit() {this.columns.forEach(el => {if (el.type == 'operator') {this.searchData['user_id'] = '';this.searchData['el.user_type'] = '';this.onSearch('')}if (el.type == 'merchant') {this.onSearch_merchant('')}if (el.type == 'client') {this.onSearch_client('')}if (el.type == 'admin') {this.onSearch_admin('')}this.searchData[el.key] = "";this.filterLength++;})}// 清空搜索条件resetData() {for (const i in this.searchData) {if (this.searchData[i]) {this.searchData[i] = '';}}this.searchData.page = 1;this.searchData.limit = 15;this.submit();}// 搜索按钮事件submit() {if (this.searchData.operator) {delete this.searchData.operator;}if (this.searchData.start_at) {this.searchData.start_at = this.format(this.searchData.start_at)}if (this.searchData.end_at) {this.searchData.end_at = this.format(this.searchData.end_at)}this.toSearch.emit(this.searchData);}// 日志操作人搜索onSearch(value: string) {this.httpClient.get('/api/admin/member?name=' + value).subscribe((res: {}) => {const resData: any = res;this.operatorOptions = resData.message;});}changeOption(value: {}) {this.searchData.user_id = value['id'];this.searchData.user_type = value['user_type'];}// 商户名称搜索onSearch_merchant(value: string) {this.httpClient.get('/api/admin/merchant?name=' + value).subscribe((res: {}) => {const resData: any = res;this.merchantOptions = resData.message.data;});}// 客户名搜索onSearch_client(value: string) {this.httpClient.get('/api/admin/user?name=' + value).subscribe((res: {}) => {const resData: any = res;this.clientOptions = resData.message.data;});}// 操作员名搜索onSearch_admin(value: string) {this.httpClient.get('/api/admin/admin?name=' + value).subscribe((res: {}) => {const resData: any = res;this.adminOptions = resData.message.data;});}// 格式化时间format(time) {var date = new Date(time);var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();return (year + '-' + month + '-' + day);}
}

index.less:

:host {display: block;width: 95%;margin: 0 auto;::ng-deep {nz-form-control {min-width: 60%;}nz-select {width: 100%;}.ant-calendar-picker {width: 100%;}}
}

其中有个特殊的地方，是根据用户输入的关键字，先模糊搜索用户名和用户类型，再根据用户选择的用户id去进行筛选。