Search

CuiSearch 搜索组件

CuiSearch

CuiSearch 用于承载列表页顶部的筛选与查询动作，关键在于高频条件收敛与结果区联动。

搜索面板

演示常见筛选字段、查询和重置动作的组合方式

Live Demo

Preview

Code

先看效果，再决定是否展开代码细节。

<script setup lang="ts">
import SearchBasicDemo from "~/app/components/demo/SearchBasicDemo.vue";
</script>

<template>
    <SearchBasicDemo />
</template>

核心 Props

搜索区常用配置

属性	类型	说明
`fields`	`CuiSearchField[]`	搜索字段配置
`modelValue`	`Record<string, any>`	当前查询条件
`inline`	`boolean`	是否行内布局
`collapsible`	`boolean`	是否支持高级筛选折叠

完整 Props

属性	类型	默认值	说明
`fields`	`CuiSearchField[]`	—	搜索字段配置（必填）
`modelValue`	`Record<string, any>`	—	当前查询条件，支持 v-model（必填）
`inline`	`boolean`	`true`	是否行内布局（注意：默认为 true，与 CuiForm 不同）
`collapsible`	`boolean`	`true`	是否支持高级搜索折叠

CuiSearchField 字段配置

属性	类型	说明
`prop`	`string`	字段名（必填）
`label`	`string`	标签文字（必填）
`type`	`'input' \| 'select' \| 'date' \| 'daterange'`	字段类型
`placeholder`	`string`	占位符文字
`options`	`{ label: string; value: any }[]`	select 类型的选项列表
`advanced`	`boolean`	是否为高级搜索字段（collapsible 时控制显隐）

Emits

事件名	参数	说明
`update:modelValue`	`(value: Record<string, any>)`	查询条件更新
`search`	`(value: Record<string, any>)`	点击搜索按钮
`reset`	`(value: Record<string, any>)`	点击重置按钮

导航与布局

当页面信息密度和流程复杂度上升时，需要通过搜索面板和标签页组织交互，而不是继续堆叠普通内容块。

Tab

`CuiTab` 负责在同一页面内切换多段内容或状态区域，适合资料、日志和附件等并列信息组织。

GitHub 提交 Issue