封装搜索框组件

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

大致样式如下图：

这里我使用的是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 [nzServerSe