SearchForm

搜索表单组件，用于列表页面的条件筛选。

基础用法

SearchForm 通常与 PageTemplate 配合使用，通过 useState 配置自动集成。

useState({
  searchConfig: [
    { type: "input", prop: "name", label: "名称" },
    { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
  ],
});

搜索配置

import { defineSearchConfig } from "vue-admin-kit";

const searchConfig = defineSearchConfig([
  {
    type: "input",
    prop: "name",
    label: "名称",
    span: 8,
    placeholder: "请输入名称",
  },
  {
    type: "select",
    prop: "status",
    label: "状态",
    dictType: "sys_status",
    filterable: true,
  },
  {
    type: "date",
    prop: "createTime",
    label: "创建时间",
    dateType: "daterange",
  },
]);

配置项

属性	类型	说明
type	string	组件类型
prop	string	字段名
label	string	标签
span	number	栅格占比（24 栅格）
placeholder	string	占位文本
dictType	string	字典类型
options	array	静态选项
filterable	boolean	是否可搜索
multiple	boolean	是否多选

自定义搜索区域

<template>
  <PageTemplate>
    <template #search>
      <!-- 自定义搜索内容 -->
      <el-form :model="searchForm" inline>
        <el-form-item label="名称">
          <el-input v-model="searchForm.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #table>
      <Table />
    </template>
  </PageTemplate>
</template>