<div class="search-container">
      <el-form
        ref="queryFormRef"
        :model="queryForm"
        :inline="true"
        @submit.prevent
      >
        <!-- 第一行：始终显示的关键搜索条件 -->
        <div class="search-row">
          <el-form-item label="仓库">
            <el-select
              v-model="queryForm.wareHouse_Sid"
              placeholder="请选择仓库"
              clearable
              filterable
              @change="onWarehouseChange"
            >
              <el-option
                v-for="wh in util.wareHouseList"
                :key="wh.wh_Sid"
                :label="wh.wh_Name"
                :value="wh.wh_Sid"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="货架">
            <el-select
              v-model="queryForm.shelf_Sid"
              placeholder="请选择货架"
              @change="onShelfChange"
              clearable
              filterable
              :disabled="!queryForm.wareHouse_Sid"
            >
              <el-option
                v-for="s in shelvesByWh"
                :key="s.s_Sid"
                :label="s.s_Name"
                :value="s.s_Sid"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="层数">
            <el-select
              v-model="queryForm.tiers_Sid"
              placeholder="请选择层数"
              clearable
              filterable
              :disabled="!queryForm.shelf_Sid"
            >
              <el-option
                v-for="t in tiersByShelf"
                :key="t.t_Sid"
                :label="t.t_Name"
                :value="t.t_Sid"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品">
            <el-select
              v-model="queryForm.goods_MaterialSid"
              placeholder="请选择商品"
              clearable
              filterable
            >
              <el-option
                v-for="g in util.goodsList"
                :key="g.g_MaterialSid"
                :label="g.g_Name"
                :value="g.g_MaterialSid"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <i-ep-search />
              搜索
            </el-button>
            <el-button type="text" @click="expand = !expand" class="expand-btn">
              {{ expand ? "收起" : "更多" }}
              <i-ep-arrow-down v-if="!expand" />
              <i-ep-arrow-up v-else />
            </el-button>
          </el-form-item>
        </div>

        <!-- 第二行：可收缩的扩展搜索条件 -->
        <el-collapse-transition>
          <div v-show="expand" class="expand-row">
            <el-form-item label="供应商">
              <el-select
                v-model="queryForm.supplier_Id"
                clearable
                filterable
                placeholder="请选择供应商"
              >
                <el-option
                  v-for="sup in util.supplierList"
                  :key="sup.s_Id"
                  :label="sup.s_Name"
                  :value="sup.s_Id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="批号">
              <el-input
                v-model="queryForm.pd_BatchNumber"
                placeholder="请输入批号"
              />
            </el-form-item>

            <el-form-item label="流水号">
              <el-input
                v-model="queryForm.pd_SerialNumber"
                placeholder="请输入流水号"
              />
            </el-form-item>
          </div>
        </el-collapse-transition>
      </el-form>
    </div>

const expand = ref(false);

.search-container {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.expand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e0e0e0;
}

.expand-btn {
  margin-left: 8px;
  color: #409eff;
}

:deep(.el-form-item) {
  margin-bottom: 12px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-row,
  .expand-row {
    gap: 8px;
  }

  :deep(.el-form-item) {
    margin-right: 8px;
  }
}
.multi-line-text {
  white-space: pre-line; /* 关键样式：保留换行符并正常合并空格 */
  text-align: left; /* 根据需要设置对齐方式 */
}

• 本文标题： 高级搜索收缩式设计
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：为什么string属性后面的变量会有绿色下划线
• 下一篇： 阿里云短信系统API接口