PageSearch 搜索表单

配置化生成搜索表单，支持输入框、下拉选择、树形选择、日期范围等。

Props

参数	说明	类型	默认值
search-config	搜索配置	ISearchConfig	—

ISearchConfig

属性	说明	类型	默认值
formItems	表单项配置	IFormItem[]	[]
permPrefix	权限前缀，用于按钮权限校验	string	—
isExpandable	是否开启展开/收缩	boolean	true
showNumber	收起时默认显示的表单项数量	number	3
colon	标签后是否显示冒号	boolean	false
grid	自适应网格布局，启用后表单项不应设置 style.width	boolean | "left" | "right"	—
form	ElForm 属性	Partial<FormProps>	—
cardAttrs	卡片容器属性	Partial<CardProps>	—

FormItem

属性	说明	类型	默认值
type	组件类型	ISearchComponent	—
label	标签文本	string	—
prop	绑定字段名	string	—
attrs	组件属性，透传给底层组件	object	—
options	选项数据（select / radio / checkbox）	{ label, value }[]	—
tips	标签提示文本	string	—
initialValue	初始值	any	—
slotName	自定义插槽名（type: "custom" 时使用）	string	—
hidden	是否隐藏	boolean	false
col	响应式列宽	Partial<ColProps>	—
events	组件事件绑定	Record<string, (...args) => void>	—
initFn	初始化数据函数	(item) => void	—

type 可选值

input / select / input-number / cascader / tree-select / date-picker / time-picker / time-select / input-tag / custom-tag / custom

配置示例

const searchConfig: ISearchConfig = reactive({
  permPrefix: "sys:user",
  formItems: [
    {
      type: "input",
      label: "关键字",
      prop: "keywords",
      attrs: {
        placeholder: "用户名/昵称/手机号",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "select",
      label: "状态",
      prop: "status",
      attrs: { clearable: true, style: { width: "200px" } },
      options: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 },
      ],
    },
    {
      type: "tree-select",
      label: "部门",
      prop: "deptId",
      attrs: {
        data: deptArr,
        filterable: true,
        "check-strictly": true,
        "render-after-expand": false,
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "date-picker",
      label: "创建时间",
      prop: "createTime",
      attrs: {
        type: "daterange",
        "range-separator": "~",
        "start-placeholder": "开始时间",
        "end-placeholder": "截止时间",
        "value-format": "YYYY-MM-DD",
        style: { width: "240px" },
      },
    },
  ],
});

Events

事件名	说明	回调参数
query-click	点击查询按钮	(params: any)
reset-click	点击重置按钮	()

实例方法

方法	说明
getQueryParams()	获取当前查询参数
toggleVisible()	切换搜索区域显隐