CondorSearch

CondorSearch 是一个高级搜索表单组件，集成了 CondorGrid 栅格布局和 CondorFormItem 动态渲染。支持搜索/重置操作和折叠展开功能。

组件 Props

参数名	类型	默认值	说明
columns	Condor.Search.Column[]	-	必需 搜索字段配置数组
labelPlacement	'left' / 'top'	'left'	标签对齐方式
cols	number / Record<Condor.Grid.BreakPoint, number>	{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }	每行列数
gap	number / [number, number]	[15, 0]	网格间距
isCollapsed	boolean	true	是否默认折叠

组件事件

事件名	说明	参数
search	点击搜索或重置时触发	data: Condor.Search.FormItem — 搜索参数对象

插槽

插槽名	说明	作用域参数
search-${item.key}	自定义某个搜索字段的渲染	{ row } — 当前搜索表单数据

Search.Column 配置

每个列配置项在 columns 配置的基础上，额外支持 search 对象来设置该字段在搜索区域的布局：

{
  key: 'name',
  title: '名称',
  search: {
    span: 2,      // 搜索区域中占的列数
    offset: 0,    // 偏移量
    xs: { span: 1 },
    lg: { span: 2 }
  }
}

基本用法

<template>
  <CondorSearch :columns="searchColumns" @search="handleSearch" />
</template>

<script setup lang="ts">
const searchColumns = [
  {
    key: 'name',
    title: '名称',
    component: { name: 'n-input' },
    operator: 'like'
  },
  {
    key: 'status',
    title: '状态',
    component: {
      name: 'condor-dict-select',
      props: { code: 'status' }
    }
  },
  {
    key: 'createtime',
    title: '创建时间',
    operator: 'between',
    component: {
      name: 'n-date-picker',
      props: { type: 'datetimerange' }
    },
    value: [Date.now() - 86400000, Date.now()]
  }
];

const handleSearch = (params: Record<string, any>) => {
  console.log('搜索参数:', params);
};
</script>