@tcly-pangu/search-form-container

使用方式

npm install @tcly-pangu/search-form-container -S

<search-form-container v-slot="{ grid }" :formItemCount="4" @search="onClickSearchBtn" @reset="onClickResetBtn">
  <!-- 第一个表单项使用默认栅格参数 default -->
  <a-col v-bind="grid.default">
    <a-form-item label="广告名称">
      <a-input v-model="queryParam.advertiseName" placeholder="请输入广告名称" allowClear />
    </a-form-item>
  </a-col>

  <!-- 第二个、第三个表单项要做响应式隐藏，使用栅格参数 responsive2、responsive3 -->
  <a-col v-bind="grid.responsive2">
    <a-form-item label="广告类型">
      <a-select v-model="queryParam.advertiseType" placeholder="请选择广告类型" allowClear>
        <a-select-option v-for="(item, index) in advertiseTypeList" :key="index" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
    </a-form-item>
  </a-col>
  <a-col v-bind="grid.responsive3">
    <a-form-item label="投放小程序">
      <a-select v-model="queryParam.appId" placeholder="请选择投放小程序" allowClear>
        <a-select-option v-for="(item, index) in miniProgramList" :key="index" :value="item.appId">{{ item.appName }}</a-select-option>
      </a-select>
    </a-form-item>
  </a-col>

  <!-- 第四个表单项开始后面所有的表单项要做折叠隐藏，使用栅格参数 collapse -->
  <a-col v-bind="grid.collapse">
    <a-form-item label="状态">
      <a-select v-model="queryParam.status" placeholder="请选择状态" allowClear>
        <a-select-option :value="0">已下线</a-select-option>
        <a-select-option :value="1">已上线</a-select-option>
      </a-select>
    </a-form-item>
  </a-col>
</search-form-container>