PcSearch 搜索表单

PcSearch 是基于 Element Plus Form 封装的配置化搜索组件，用于管理后台列表页的查询条件区域。通过 formList 渲染常见表单项（输入框、下拉、日期），并通过 request 事件通知父组件刷新数据。

基础用法

使用 v-model 绑定查询对象，form-list 描述表单项，点击「搜索」/「重置」会触发 request 事件。

loading

插槽与操作区

需要特殊控件时，用 #[prop] 控件级插槽替换某字段的控件；用 #actionList 在搜索 / 重置按钮后追加业务按钮（如导出、新增）。

loading

与 PcTable 联动

在 request 事件里调用 PcTable 实例的 requestData('reset') 刷新列表，是最常见的列表页用法。完整示例见 PcTable 文档的「搜索联动」。

<template>
  <pc-search v-model="queryParams" :form-list="formList" @request="handleSearch" />
  <pc-table ref="tableRef" :request-api="requestUserList" :req-params="queryParams" :colum-list="columns" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableRef = ref()
const queryParams = ref({ keyword: '', status: '' })

function handleSearch(type?: 'reset') {
  tableRef.value?.requestData('reset')
}
</script>

API

Attributes

属性	说明	类型	默认值
model-value / v-model	表单数据对象	Record<string, any>	—
form-list	表单项配置列表	FormItemProp[]	—
action-list	右侧操作按钮配置	IActionListProp[]	—
locale	文案覆盖（搜索 / 重置 / placeholder 等）	Partial<ISearchLocale>	—

Events

事件名	说明	回调参数
request	点击搜索（校验通过）或重置后触发；重置时第一个参数为 'reset'	(type?: "reset")
change	任一表单项值变化时触发	(prop: string, value: any)
reset	点击重置后触发（在 request 之前）	—

Slots

插槽名	说明	作用域参数
[prop]	替换指定字段的控件，保留外层 el-form-item	{ row }（当前项配置）
form-item-[prop]	替换整个表单项（含 el-form-item）	—
actionList	搜索 / 重置按钮后的操作区	—
after	表单末尾扩展区	—

Exposes

名称	说明	类型
search	触发表单校验，通过后 emit request	() => void
reset	重置表单字段并 emit request('reset')	() => void

类型声明

interface BaseFormItemProp {
  prop: string
  label: string
  required?: boolean
  width?: string | number
  rules?: FormItemRule[]
  placeholder?: string
}

// 输入框
interface FormItemInputProp extends BaseFormItemProp {
  type?: "input"
  restProps?: InputProps
}

// 下拉选择
interface FormItemSelectProp extends BaseFormItemProp {
  type?: "select"
  valueKey?: string // 选项 value 字段，默认 "value"
  labelKey?: string // 选项 label 字段，默认 "label"
  sources: { label: string; value: string | number; [k: string]: any }[]
  restProps?: ISelectProps
}

// 日期选择
interface FormItemDateProp extends BaseFormItemProp {
  type?: "date"
  datetype?: IDatePickerType // el-date-picker 的 type，默认 "daterange"
  restProps?: typeof ElDatePicker
}

type FormItemProp = FormItemInputProp | FormItemSelectProp | FormItemDateProp

interface IActionListProp {
  label: string
  type?: ButtonType
  click?: () => void
}

interface PcSearchInstance {
  search: () => void
  reset: () => void
}