1.2.5 • Published 5 years ago
category: Components
type: 数据展示
title: ExTable
subtitle: 表格组件
modifiedJs: 1
order: 6
cols: 1
扩展table组件。
用于整屏显示的表格页面
何时使用
- 表格需要支持在窗口缩放时能跟着缩放且页面不复杂,主要使用在 table 页面。
注意事项
API
BaseTable 列表
参数 | 说明 | 类型 | 默认值 |
---|
extraHeight | table 的分页下面的高度 | number | 0 |
特别说明:table 默认高度计算公式:table 高度=浏览器高度-table 距离文档顶部的高度-extraHeight;
FilterTable 列表
参数 | 说明 | 类型 | 默认值 |
---|
filter | 是否需要筛选列 | boolean | true |
filterList | 筛选表头的数据来源,子项为表头column一一对应的普通对象,key、required、selected为必填字段,若column子项中有fixed属性,必须映射到对应的filterList子项上。 | 数组 | |
onFilterSave | 筛选框保存时的回调函数,可以获取最新的filterList和表头数组 | function | |
extraHeight | table 的分页下面的高度 | number | 0 |
sortWarnText | 搜索时拖拽排序的文字警告 | string | "不可在搜索时进行拖拽" |
特别说明:不支持有列 fix 定位;且每项必传 width;
TableBottomActions 批量操作
参数 | 说明 | 类型 | 默认值 |
---|
selects | 选中项数,不传则不显示 | number | |
showButtons | 显示按钮数量,包含更多下拉框,当 isMore 属性为 true | number | 3 |
contents | 按钮文案及点击事件的回调 | 数组 | [] |
showTotalRender | 总条数 | string | '' |
isMore | 是否出现更多按钮 | boolean | true |
Filter 筛选
参数 | 说明 | 类型 | 默认值 |
---|
className | class | string | |
handleFilter | 查询的回调。fields 是控件的值。 type 有两个值,分别为 normal 和 advanced 。normal 是查询左侧普通搜索和更多搜索,advanced 是查询高级搜索。 | function(fields, type) {} | |
resetNormalFilter | 普通搜索和更多搜索-点击重置的回调 | function() {} | |
collapseMoreFilter | 更多搜索-点击展开收起回调,type 有两个值,分别为 show 和 hide 。用来区分是收起还是展开。 | function(type) {} | |
cancelMoreFilter | 更多搜索-取消回调 | function() {} | |
collapseAdvancedFilter | 高级搜索-点击展开收起回调,type 有两个值,分别为 show 和 hide 。用来区分是收起还是展开。 | function(type) {} | |
resetAdvancedFilter | 高级搜索-重置回调 | function() {} | |
cancelAdvancedFilter | 高级搜索-取消回调 | function() {} | |
***特别提示:Filter
组件外不可以有 Form
组件包裹。***
NormalFilter.Item 左侧普通搜索
参数 | 说明 | 类型 | 默认值 |
---|
label | label 标签的文本 | string | |
initialValue | 初始值,若同时在 fieldOptions 中设置了 initialValue ,则会是 fieldOptions 中的 initialValue 生效 | string | |
field | 必填输入控件唯一标志;同 getFieldDecorator(id, options) 中的 id | string | |
fieldOptions | 同 getFieldDecorator(id, options) 中的 options | Object | |
在左侧普通搜索中使用多选框的时候,多选框下拉框的父级为 NormalFilter.Item
;
MoreFilter 更多搜索
参数 | 说明 | 类型 | 默认值 |
---|
formItemLayout | 布局;labelCol 为 label 标签布局;wrapperCol 为输入控件布局 | object | { labelCol: 4, wrapperCol: 20 } |
configWidth | 弹出框的宽度 | number | 500 |
MoreFilter.Item 更多搜索
参数 | 说明 | 类型 | 默认值 |
---|
label | label 标签的文本 | string | |
initialValue | 初始值,若同时在 fieldOptions 中设置了 initialValue ,则会是 fieldOptions 中的 initialValue 生效 | string | |
field | 必填输入控件唯一标志;同 getFieldDecorator(id, options) 中的 id | string | |
fieldOptions | 同 getFieldDecorator(id, options) 中的 options | Object | |
AdvancedFilter 高级搜索
参数 | 说明 | 类型 | 默认值 |
---|
configWidth | 弹出框的宽度 | number | 500 |
footer | 在查询、重置、取消上面的操作区域 | string | ReactNode | - |
AdvancedFilter.Item 高级搜索
参数 | 说明 | 类型 | 默认值 |
---|
label | label 标签的文本 | string | |
labelSpan | label 标签布局 | number | 4 |
colon | 配合 label 属性使用,表示是否显示 label 后面的冒号 | boolean | true |
AdvancedFilter.Item 里的 children
参数 | 说明 | 类型 | 默认值 |
---|
span | 输入控件布局 | number | 7 |
initialValue | 初始值,若同时在 fieldOptions 中设置了 initialValue ,则会是 fieldOptions 中的 initialValue 生效 | string | |
field | 必填输入控件唯一标志;同 getFieldDecorator(id, options) 中的 id | string | |
fieldOptions | 同 getFieldDecorator(id, options) 中的 options | Object | |