FoxTable

Table API

Table 属性

| 参数 | 说明 | 类型 | 默认值 | |------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------| | tableTitle | (扩展) 表格标题，显示在工具栏左侧 | ^[string] | — | | api | (扩展) 远程数据请求函数，返回一个 Promise | ^[Function](params: any) => Promise<any> | — | | data | 显示的数据。当 api 为空时，表格将展示此静态数据 | ^[array]T[] | [] | | params | (扩展) 发送 API 请求时的额外参数 | ^[object]Record<string, any> | — | | pagination | (扩展) 是否启用分页功能 | ^[boolean] | true | | paginationProps | (扩展) 分页组件的配置项，[参考 Pagination 属性] | ^[object]any | — | | tableClass | (扩展) 表格外层包裹容器的自定义类名 | ^[string] | — | | columns | (扩展) (必传) 列配置数组 | ^[array]ColumnItem<T>[] | — | | multiple | (扩展) 是否显示多选列（Checkbox 勾选列） | ^[boolean] | false | | loading | (扩展) 是否显示加载状态 | ^[boolean] | false | | tools | (扩展) 工具栏显示的工具项，支持刷新和全屏 | ^[enum]('refresh' \| 'fullScreen')[] | ['refresh', 'fullScreen'] | | dataParser | (扩展) 数据解析钩子，用于自定义 API 响应格式的解析逻辑 | ^[Function](res: any) => { rows: T[]; total: number } | — | | zIndex | (扩展) 切换全屏模式时容器的层级（z-index） | ^[number] | 1001 | | height | Table 的高度。 默认为自动高度。 如果 height 为 number 类型，单位为 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，表格高度会受外部样式影响 | ^[string] / ^[number] | — | | max-height | Table 的最大高度。 合法的值为数字或者单位为 px 的高度 | ^[string] / ^[number] | — | | stripe | 是否为斑马纹 table | ^[boolean] | false | | border | 是否带有纵向边框 | ^[boolean] | false | | size | Table 的尺寸 | ^[enum]'' \| 'large' \| 'default' \| 'small' | — | | fit | 列的宽度是否自适应容器宽度 | ^[boolean] | true | | show-header | 是否显示表头 | ^[boolean] | true | | highlight-current-row | 是否要高亮当前行 | ^[boolean] | false | | current-row-key | 当前行的 key，只写属性 | ^[string] / ^[number] | — | | row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className | ^[Function](data: { row: any, rowIndex: number }) => string / ^[string] | — | | row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置同样的 style | ^[Function](data: { row: any, rowIndex: number }) => CSSProperties / ^[object]CSSProperties | — | | cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className | ^[Function](data: { row: any, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number }) => string / ^[string] | — | | cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置同样的 style | ^[Function](data: { row: any, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number }) => CSSProperties / ^[object]CSSProperties | — | | header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className | ^[Function](data: { row: any, rowIndex: number }) => string / ^[string] | — | | header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置同样的 style | ^[Function](data: { row: any, rowIndex: number }) => CSSProperties / ^[object]CSSProperties | — | | header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className | ^[Function](data: { row: any, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number }) => string / ^[string] | — | | header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置同样的 style | ^[Function](data: { row: any, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number }) => CSSProperties / ^[object]CSSProperties | — | | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function | ^[function](row: any) => string / ^[string] | — | | empty-text | 空数据时显示的文本内容， 也可以通过 #empty 设置 | ^[string] | No Data | | default-expand-all | 是否默认展开所有行，当表格包含展开行 column type="expand" 或者树形表格时有效 | ^[boolean] | false | | expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组 | ^[array]Array<string> | — | | default-sort | 默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序 | ^[object]Sort | 如果只设置了 prop 而没有设置 order，则 order 默认为 ascending | | tooltip-effect | tooltip 的主题 | ^[enum]'dark' \| 'light' | dark | | tooltip-options ^(2.2.28) | tooltip 的选项，详情请参阅 tooltip 组件 | ^[object]Pick<ElTooltipProps, 'effect' \| 'enterable' \| 'hideAfter' \| 'offset' \| 'placement' \| 'popperClass' \| 'popperOptions' \| 'showAfter' \| 'showArrow'> | ^[object]{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } } | | append-filter-panel-to ^(2.8.4) | 过滤面板追加至的元素 | ^[string] | — | | show-summary | 是否在表尾显示合计行 | ^[boolean] | false | | sum-text | 合计行第一列的文本 | ^[string] | 合计 | | summary-method | 自定义的合计计算方法 | ^[Function](data: { columns: any[], data: any[] }) => (VNode \| string)[] | — | | span-method | 合并行或列的计算方法 | ^[Function](data: { row: any, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number }) => number[] \| { rowspan: number, colspan: number } \| void | — | | select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行 | ^[boolean] | true | | indent | 展示树形数据时，树节点的缩进 | ^[number] | 16 | | lazy | 是否懒加载子节点数据 | ^[boolean] | false | | load | 加载子节点数据的函数，lazy 为 true 时生效 | ^[Function](row: any, treeNode: TreeNode, resolve: (data: any[]) => void) => void | — | | tree-props | 渲染嵌套数据的配置选项 | ^[object]{ hasChildren?: string, children?: string, checkStrictly?: boolean } | ^[object]{ hasChildren: 'hasChildren', children: 'children', checkStrictly: false } | | table-layout | 设置表格单元格、行和列的布局算法 | ^[enum]'fixed' \| 'auto' | fixed | | scrollbar-always-on | 总是显示滚动条 | ^[boolean] | false | | show-overflow-tooltip | 默认情况下若内容过多会折行显示，若需要单行显示可以使用该属性，它接受一个 Boolean 或 Object，若为 true，所有的列都会单行显示并使用 tooltip 显示更多内容，具体配置详见 table tooltip-options | ^[boolean] / object ^(2.3.7) | — | | flexible ^(2.2.1) | 确保主轴最小尺寸不跟随内容 | ^[boolean] | false | | scrollbar-tabindex ^(2.8.3) | 表格主体滚动条容器的 tabindex | ^[string] / ^[number] | — | | allow-drag-last-column ^(2.9.2) | 是否允许拖动最后一列 | ^[boolean] | true | | tooltip-formatter ^(2.9.4) | 使用 show-overflow-tooltip 时自定义 tooltip 内容 | ^[Function](data: { row: any, column: TableColumnCtx<T>, cellValue: any }) => VNode \| string | — | | preserve-expanded-content ^(2.9.7) | 折叠时是否在 DOM 中保留展开行内容 | ^[boolean] | false | | native-scrollbar ^(2.10.5) | 是否使用原生滚动条 | ^[boolean] | false | | row-expandable ^(2.13.2) | 启用行可展开，在表格有 type="expand" 列时生效 | ^[Function](row: any, index: number) => boolean | — |

Table 事件

| 事件名 | 说明 | 类型 | |--------------------|----------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------| | load | (扩展) 远程数据请求开始时触发 | ^[Function]() => void | | loaded | (扩展) 远程数据请求结束时触发（无论成功或失败），返回当前页数据 | ^[Function](data: T[]) => void | | refresh | (扩展) 用户点击工具栏刷新按钮时触发 | ^[Function]() => void | | full-screen | (扩展) 切换全屏状态时触发 | ^[Function](isFull: boolean) => void | | pagination-change | (扩展) 页码或页号发生改变时触发 | ^[Function](pagination: PaginationParams) => void | | select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | ^[Function]<T = any>(selection: T[], row: T) => void | | select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | ^[Function](selection: any[]) => void | | selection-change | 当选择项发生变化时会触发该事件 | ^[Function](newSelection: any[]) => void | | cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | ^[Function](row: any, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: Event) => void | | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | ^[Function](row: any, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: Event) => void | | cell-click | 当某个单元格被点击时会触发该事件 | ^[Function](row: any, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: Event) => void | | cell-dblclick | 当某个单元格被双击击时会触发该事件 | ^[Function](row: any, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: Event) => void | | cell-contextmenu | 当某个单元格被鼠标右键点击时会触发该事件 | ^[Function](row: any, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: Event) => void | | row-click | 当某一行被点击时会触发该事件 | ^[Function](row: any, column: TableColumnCtx<T>, event: Event) => void | | row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | ^[Function](row: any, column: TableColumnCtx<T>, event: Event) => void | | row-dblclick | 当某一行被双击时会触发该事件 | ^[Function](row: any, column: TableColumnCtx<T>, event: Event) => void | | header-click | 当列头被点击时会触发该事件 | ^[Function](column: TableColumnCtx<T>, event: Event) => void | | header-contextmenu | 当列头被鼠标右键点击时会触发该事件 | ^[Function](column: TableColumnCtx<T>, event: Event) => void | | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | ^[Function](data: {column: TableColumnCtx<T>, prop: string, order: any }) => void | | filter-change | 当表格的筛选条件发生变化的时候会触发该事件 | ^[Function](newFilters: any) => void | | current-change | 当表格的当前行发生变化的时候会触发该事件 | ^[Function](currentRow: any, oldCurrentRow: any) => void | | header-dragend | 当拖动表头改变列宽时会触发该事件 | ^[Function](newWidth: number, oldWidth: number, column: TableColumnCtx<T>, event: MouseEvent) => void | | expand-change | 当用户对某一行展开或者关闭的时候会触发该事件（如果是展开行，第二个参数为 expandedRows；如果是树形表格，第二个参数为 expanded） | ^[Function](row: any, expandedRows: any[]) => void & (row: any, expanded: boolean) => void | | scroll ^(2.9.0) | 滚动后触发 | ^[Function]({ scrollLeft: number, scrollTop: number }) => void |

Table 插槽

| 插槽名 | 说明 | 子标签 | |---------|-----------------------------------------------------------|--------------| | default | 自定义默认内容 | Table-column | | append | 插入至表格最后一行之后的内容。 如果需要实现无限滚动，可能需要该插槽。 如果存在合计行，该插槽内容会在合计行之上。 | — | | empty | 当数据为空时自定义的内容 | — |

Table 方法

| 方法名 | 说明 | 类型 | |----------------------------|----------------------------------------------------|------------------------------------------------------------------------------| | loadData | (扩展) 加载数据（保持当前页码不变） | ^[Function]() => void | | reloadData | (扩展) 重新加载数据（将页码重置为 1） | ^[Function]() => void | | tableData | (扩展) 当前表格显示的响应式数据数组 | ^[array]T[] | | pager | (扩展) 当前表格的分页状态，包含当前页、每页条数和总条数 | ^[object]{ currentPage: number, pageSize: number, total: number } | | clearSelection | 用于多选表格，清空用户的选择 | ^[Function]() => void | | getSelectionRows | 返回当前选中的行 | ^[Function]() => any[] | | toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置该行是否选中 | ^[Function](row: any, selected?: boolean, ignoreSelectable = true) => void | | toggleAllSelection | 用于多选表格，切换所有行的选中状态 | ^[Function]() => void | | toggleRowExpansion | 用于可展开表格或树形表格，切换某一行的展开状态，如果使用了第二个参数，则可直接设置该行是否展开或关闭 | ^[Function](row: any, expanded?: boolean) => void | | setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会清空选中行 | ^[Function](row: any) => void | | clearSort | 用于清空排序条件，数据会恢复成未排序时的顺序 | ^[Function]() => void | | clearFilter | 用于清空所有筛选条件，也可以传入 columnKey 数组以清空指定列的筛选条件 | ^[Function](columnKeys?: string[]) => void | | doLayout | 对 Table 进行重新布局。 当 Table 或其父元素由隐藏变为显示时，可能需要手动调用该方法 | ^[Function]() => void | | sort | 手动对表格进行排序。 参数 prop 属性指定排序列，order 指定排序顺序 | ^[Function](prop: string, order: string) => void | | scrollTo | 滚动到特定坐标 | ^[Function](options: number \| ScrollToOptions, yCoord?: number) => void | | setScrollTop | 设置垂直滚动位置 | ^[Function](top?: number) => void | | setScrollLeft | 设置水平滚动位置 | ^[Function](left?: number) => void | | columns ^(2.7.6) | 获取表格列的上下文 | ^[array]TableColumnCtx<T>[] | | updateKeyChildren ^(2.8.4) | 用于懒加载表格，更新指定 key 的子节点数据，必须设置 rowKey | ^[Function](key: string, data: T[]) => void |

Table-column API

Table-column 属性

| 参数 | 说明 | 类型 | 默认值 | |----------------------------|---------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------| | prop | (扩展) (必传) 对应列内容的字段名 | ^[enum]keyof T | — | | slotname | (扩展) 自定义插槽名称，用于自定义列内容。支持模型字段名、'action' 或自定义字符串 | ^[string] / ^[enum]keyof T \| 'action' | — | | prepend | (扩展) 单元格内容前缀 (例如：￥) | ^[string] | — | | append | (扩展) 单元格内容后缀 (例如：%) | ^[string] | — | | type | 对应列的类型。 如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始）；如果设置了 expand 则显示可展开按钮 | ^[enum]'default' \| 'selection' \| 'index' \| 'expand' | default | | index | 如果设置了 type=index，可以通过该属性自定义索引，可以是一个数字，也可以是一个函数 | ^[number] / ^[Function](index: number) => number | — | | label | 显示的标题 | ^[string] | — | | column-key | column 的 key，如果需要使用 filter-change 事件，则需要该属性来标识是哪个列的筛选条件 | ^[string] | — | | prop | 对应列内容的字段名，也可以使用别名 property | ^[string] | — | | width | 对应列的宽度 | ^[string] / ^[number] | '' | | min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | ^[string] / ^[number] | '' | | fixed | 列是否固定在左侧或者右侧。 若为 true 则固定在左侧 | ^[enum]'left' \| 'right' / ^[boolean] | false | | render-header | 列标题 Label 区域渲染使用的 Function | ^[Function](data: { column: TableColumnCtx<T>, $index: number }) => void | — | | sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听表格的 sort-change 事件 | ^[boolean] / ^[string] | false | | sort-method | 指定列的排序方法，该函数接受两个参数 a 和 b，返回值同 Array.sort 的回调函数 | ^[Function]<T = any>(a: T, b: T) => number | — | | sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 为 true 且 sort-method 未定义时有效。 如果是数组，则先按照数组第一项排序，如果相同则按照第二项排序，以此类推 | ^[Function](row: any, index: number) => string / ^[string] / ^[array]string[] | — | | sort-orders | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 接受一个数组，数组元素表示轮转策略。 | ^[object]('ascending' \| 'descending' \| null)[] | ['ascending', 'descending', null] | | resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | ^[boolean] | true | | formatter | 用来格式化内容 | ^[function](row: any, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode \| string | — | | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | ^[boolean] / object ^(2.2.28) | undefined | | align | 对齐方式 | ^[enum]'left' \| 'center' \| 'right' | left | | header-align | 表头对齐方式，若不设置该项，则使用表格单元格对齐方式 | ^[enum]'left' \| 'center' \| 'right' | left | | class-name | 列的 className | ^[string] | — | | label-class-name | 当前列标题的 className | ^[string] | — | | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值决定这一行是否可以勾选 | ^[Function](row: any, index: number) => boolean | — | | reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新后保留之前选中的数据（需指定 row-key） | ^[boolean] | false | | filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性 | ^[array]Array<{text: string, value: string}> | — | | filter-placement | 过滤弹出框的出现位置 | ^[enum]'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end' | — | | filter-class-name ^(2.5.0) | 过滤弹出框的 className | ^[string] | — | | filter-multiple | 数据过滤的选项是否多选 | ^[boolean] | true | | filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据，只要其中一个列筛选满足条件即为真 | ^[function](value: any, row: any, column: TableColumnCtx<T>) => void | — | | filtered-value | 选中的数据过滤项，如果设置了配合 render-header 使用，可以指定初始筛选状态 | ^[array]string[] | — | | tooltip-formatter ^(2.9.4) | 使用 show-overflow-tooltip 时自定义 tooltip 内容 | ^[Function](data: { row: any, column: TableColumnCtx<T>, cellValue: any }) => VNode \| string | — |

Table-column 插槽

| 插槽名 | 说明 | 类型 | |-------------|------------------------------------------|--------------------------------------------------------------------| | default | 自定义列的内容 | ^[object]{ row: any, column: TableColumnCtx<T>, $index: number } | | header | 自定义表头的内容 | ^[object]{ column: TableColumnCtx<T>, $index: number } | | filter-icon | 自定义筛选图标内容 | ^[object]{ filterOpened: boolean } | | expand | 自定义展开行内容。 expandable 属性从 v2.13.2 开始支持。 | ^[object]{ expanded: boolean, expandable: boolean } |

FoxSearch

FoxSearch 搜索组件

FoxSearch 是一个基于配置驱动的搜索表单组件，旨在通过简单的 JSON 配置快速生成复杂的搜索界面，支持高级搜索折叠、栅格布局以及多种常用表单控件。

FoxSearch API

FoxSearch 属性 (Props)

| 参数 | 说明 | 类型 | 默认值 | |----------------|-------------------------|------------------------------------------|---------| | items | (必传) 搜索表单项的配置数组 | ^[array]SearchItem[] | [] | | action | 是否显示默认的“查询”和“重置”按钮组 | ^[boolean] | true | | size | 表单组件的整体尺寸 | ^[enum]'large' \| 'default' \| 'small' | default | | label-position | 标签名（Label）的显示位置 | ^[enum]'left' \| 'right' \| 'top' | top | | default-expand | 是否默认展开高级搜索区域 | ^[boolean] | false | | gap | 搜索项之间的间距（单位：px） | ^[number] | 15 | | grid-min-width | 搜索项的最小宽度，用于自适应布局（单位：px） | ^[number] | — | | grid-max-width | 搜索项的最大宽度，用于自适应布局（单位：px） | ^[number] | — |

FoxSearch 事件 (Events)

| 事件名 | 说明 | 类型 | |-------------------|------------------------------------------------------|----------------------------------| | change | 当搜索的参数发生任意变化时触发（包含search/reset/clear），参数为当前所有搜索项的值对象 | ^[Function]params: T) => void | | search | 点击查询按钮或触发搜索动作时触发，返回当前表单所有有效参数 | ^[Function](params: T) => void | | reset | 点击重置按钮时触发，返回重置后的初始参数对象 | ^[Function](params: T) => void | | clear | 搜索项执行clear时触发，返回当前表单所有有效参数 | ^[Function](params: T) => void |

SearchItem 配置项

基础属性 (Base Attributes)

| 参数 | 说明 | 类型 | 默认值 | |--------------|---------------------------------------------------------------|---------------------------------------------------------------|-------| | prop | (必传) 绑定到查询模型中的字段键名 | ^[string] | — | | label | 表单项的标签文本 | ^[string] | — | | type | (必传) 组件类型，定义 UI 展示形式，详见 SearchItemType | ^[enum]SearchItemType | — | | defaultValue | 默认值。点击重置时，字段将恢复至该初始值 | ^[any] | — | | placeholder | 输入框或选择器的占位提示文字 | ^[string] | — | | span | 栅格占比（大于 0）。控制该项在网格布局中占用的比例 | ^[number] | 1 | | width | 手动设置组件的具体宽度（如 200px 或 100%） | ^[string] / ^[number] | — | | options | 选项列表。仅在 type 为 select 或 tab 时有效 | ^[array]{ label: string, value: any, [key: string]: any }[] | — | | isAdvanced | 是否标记为高级搜索项。若为 true，默认会被收纳在折叠面板中 | ^[boolean] | false | | lineBreak | 是否在该搜索项前强制换行 | ^[boolean] | false | | change | 值改变时的回调函数 | ^[Function](val: any) => void | — | | clear | 点击清空图标（clearable）时的回调函数 | ^[Function]() => void | — | | attrs | 其他扩展属性。将透传给底层的 Element Plus 组件 | ^[object]Record<string, any> | — |

日期/时间增强属性 (Date/Time Attributes)

| 参数 | 说明 | 类型 | 默认值 | |--------------|---------------|--------------------------------------|-----| | format | 在输入框中显示的格式 | ^[string] | — | | valueFormat | 绑定值（提交给后端）的格式 | ^[string] | — | | disabledDate | 禁用日期的判定函数 | ^[Function](time: Date) => boolean | — | | shortcuts | 预设的快捷选项配置 | ^[array]any[] | — |

SearchItemType 类型枚举

| 类型 | 说明 | |-----------------|------------------------------------------| | input | 标准文本输入框 | | select | 下拉选择器 | | checkbox | 复选框（常用于布尔过滤或多选） | | tab | Tab 切换式选择器 | | date | 单个日期选择（默认 YYYY-MM-DD） | | daterange | 日期范围选择 | | datetime | 日期时间选择（包含时分秒） | | datetimerange | 日期时间范围选择 | | year | 年份选择器 | | month | 月份选择器 | | week | 周选择器 | | slot | 自定义插槽。通过 prop 指定的插槽名插入复杂组件 | | static | 静态隐藏项。不在 UI 占位，但在搜索时会固定带上 defaultValue |

FoxSearch 方法

| 方法名 | 说明 | 类型 | |--------------|--------------------------------------------------|----------------------------------------| | handleSearch | 触发搜索操作，执行 search 事件并传递当前表单数据 | ^[Function]() => void | | handleReset | 重置表单数据至初始状态（基于 initialSnapshot），并执行 reset 事件 | ^[Function]() => void | | toggleExpand | 手动控制高级搜索区域的展开或折叠状态 | ^[Function](expand: boolean) => void | | isExpanded | 当前高级搜索区域是否处于展开状态 | ^[boolean] |

FoxSearch 插槽 (Slots)

| 插槽名 | 说明 | 参数 | |----------|-------------------------------------------------|----| | [prop] | 自定义组件插槽。当 type 为 slot 时，使用 prop 作为插槽名 | — | | action | 操作栏插槽。用于自定义或扩展查询/重置按钮区域 | — |

FoxPagination 分页组件

FoxPagination 是对 Element Plus 分页组件的二次封装，主要用于配合表格和搜索组件，提供一致的 UI 表现和更简便的参数回调。

FoxPagination API

FoxPagination 属性 (Props)

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | current-page | 当前页码 | ^[number] | 1 | | page-size | 每页显示条目数 | ^[number] | 10 | | total | 总条目数 | ^[number] | 0 | | page-sizes | 每页显示个数选择器的选项设置 | ^[array]number[] | [10, 20, 30, 50] | | layout | 分页组件布局，子组件名用逗号分隔 | ^[string] | 'total, sizes, prev, pager, next, jumper' | | background | 是否为分页按钮添加背景色 | ^[boolean] | true | | small | 是否使用小型分页样式 | ^[boolean] | false | | disabled | 是否禁用分页 | ^[boolean] | false | | pager-count | 设置最大页码按钮数。页码按钮的数量，当总页数超过该值时会折叠 | ^[number] | 7 |

FoxPagination 事件 (Events)

| 事件名 | 说明 | 类型 | | --- | --- | --- | | change | (扩展) 当前页码或每页条数发生改变时触发 | ^[Function](data: PaginationParams) => void | | size-change | 每页条数 pageSize 改变时触发 | ^[Function](size: number) => void | | current-change | 当前页 currentPage 改变时触发 | ^[Function](page: number) => void |

类型定义 (Type Definitions)

PaginationConfig

用于组件初始化或通过配置对象传递参数。

export interface PaginationConfig {
  currentPage?: number;
  pageSize?: number;
  pageSizes?: number[];
  layout?: string;
  total?: number;
  disabled?: boolean;
  small?: boolean;
  background?: boolean;
  pagerCount?: number;
}