SearchPage
此组件是复合组件,其中包含了ScSearchPage与ScSchemaTable,如不了解以上 2 个组件,请先查看相关文档[https://tenbamboo.github.io/setaria-components/zh-CN/]
基础用法
设置初始化搜索参数
使用插槽
编辑功能
label-mode=false开启编辑模式show-oper=true显示操作列selection-type开启勾选模式(用于批量删除使用)form-save处理用户操作完的数据回调
搜索条件规则校验
- 可对
condition-schema传正常的 Schema 对象即可处理必填校验 - 其他复合校验可在
request中抛异常即可 - 这块也可配合
is-initial-search属性关闭页面初始化的第一次请求
自定义搜索区域的按钮内容
记忆功能
- 通过指定
table-id属性来开启存储 列宽、列的显示隐藏、列的显示顺序、当前分页信息、当前排序信息、当前搜索条件信息等功能 - 需把
show-column-setting和column-setting-draggable打开方可享受列的显示隐藏、列的显示顺序功能
属性透传
勾选翻页记忆
导出功能
完整功能
SchemaTable API
SchemaTable Attributes
- 此组件已支持
SchemaTable属性透传,可查看[https://tenbamboo.github.io/setaria-components/zh-CN/component/schema-table]
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| request | 请求后端接口的回调 | Function | — | 是 |
| schema | 基本 Schema 项描述 | Object | — | 是 |
| condition-schema | 搜索表单项描述 | Object, Array | — | 否 |
| table-schema | 表格表单项描述 | Object, Array | — | 否 |
| condition-ui-schema | 搜索表单项 UI 相关描述 | Object | — | 否 |
| table-ui-schema | 表格项 UI 相关描述 | Object | — | 否 |
| table-title | 表格卡片 Title | String | 搜索结果 | 否 |
| condition-title | 搜索表单卡片 Title | String | 搜索条件 | 否 |
| default-condition-data | 默认搜索的条件 | Object | — | 否 |
| is-initial-search | 是否在页面初始化时只需一次搜索 | Boolean | true | 否 |
| is-reset-after-request | 是否在点击重置按钮后默认请求一次 | Boolean | true | 否 |
| export-data | 请求后端导出接口的回调 | Function | — | 否 |
| default-condition-data | 搜索条件中的参数 | Object | — | 否 |
SchemaTable Events
| 名称 | 说明 | 类型 |
|---|---|---|
| condition-change | 搜索表单项数据值变更触发 | Function |
| page-change | 分页项变更触发 | Function |
| sort-change | 排序项变更触发 | Function |
| selection-change | 勾选项数据值变更触发 | Function |
| selection-all | 勾选所有数据值变更触发 | Function |
| cell-click | 单元格被点击时会触发该事件 | Function |
| cell-dbclick | 单元格被双击时会触发该事件 | Function |
| oper-button-click | 操作列按钮被点击时会触发该事件 | Function |
| export-success | 触发导出且成功之后的回调 | Function |
| export-error | 触发导出且失败之后的回调 | Function |
| form-open | 明细组件打开的回调 | Function |
| form-opened | 明细组件打开动画结束时的回调 | Function |
| form-close | 明细组件关闭的回调 | Function |
| form-closed | 明细组件关闭动画结束时的回调 | Function |
| form-data-change | 明细组件表单项数据值变更回调 | Function |
SchemaTable Exposes
| 方法名 | 说明 | 类型 |
|---|---|---|
| search | 手动触发搜索 | Function |
| getTableRef | 获取表格的 Ref 实例 | Function |
| getConditionRef | 获取表单的 Ref 实例 | Function |
| setSelection | 设置选中 | Function |
| clearSelection | 手动清空用户的选择 | Function |
| getSelection | 获取用户选中的数据 | Function |
SchemaTable Slots
| 插槽名 | 说明 |
|---|---|
| condition.[字段名] | 对应搜索表单项自定义插槽 |
| table.[字段名] | 对应表格项自定义插槽 |
| conditionButton | 搜索表单按钮区域的插槽 |
| batchControl | 表格顶部批量操作按钮区域的插槽 |
Setaria Business Framework