Table
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| pagination | object | {} | 分页组件的配置，传入null为隐藏分页 | |
| dataSource | array | [] | 数据源 | |
| columns | array | [] | 表列信息，具体属性参考 columns 事例 | |
| columnPlaceholder | bool | 启用后会创建一个无宽度的空列，用作宽度占位，占位后宽度溢出便不会导致表格列被压缩，多出的宽度会被空列占用。
占位列 column.key 为 table\_column\_width\_placeholder，使用中需注意避免重复 key | ||
| defaultColumnConfig | object | {} | 表列配置项，非受控 | |
| onColumnConfigChange | func | () => {} | 表列配置修改回调 | |
| expandedRowRender | func | 额外表信息渲染 | ||
| expandIconAsCell | bool | 额外表展开按钮是否独立占据一格，data有children时有效 | ||
| expandIconColumnIndex | number | 展开按钮的塞入的column index，expandIconAsCell为false时生效 | ||
| hideExpandIcon | bool | 隐藏扩展列按钮 | ||
| defaultExpandedRowKeys | array | 默认展开项，非受控 | ||
| expandedRowKeys | array | 展开项，受控 | ||
| defaultExpandAllRows | bool | 是否默认展开所有列 | ||
| onExpandedRowsChange | func | 展开事件 | ||
| onExpand | func | 展开按钮点击事件 | ||
| onRow | func | 设置行props @argument 行数据@argument 行当前翻页中的index 不可作为key使用 不建议使用 | ||
| onHeaderRow | func | 设置表头props @argument 行数据@argument 表头行的index 表示存在分组时(column.children)的表头层级 | ||
| rowSelection | union | 列表可选选项配置.
column.key 为 table\_row\_selection，使用中需注意避免重复 key | ||
| dragSorting | union | 拖拽排序 | ||
| onRowSelect | func | 列表选项变化回调 @deprecated 请使用rowSelection.onChange来替换 | ||
| showHeader | bool | 是否显示表头 | ||
| columnResizable | bool | 是否可拖拽调节表格列大小 | ||
| title | func | 头部内容 | ||
| footer | func | 底部内容 | ||
| emptyContent | node | 无数据时的展示内容 | ||
| errorContent | node | 报错信息 | ||
| handleSearch | func | (record, searchValue) => { return _.map(record).join('').indexOf(searchValue) >= 0; } | 如何搜索 | |
| customStyle | shape | {} | 自定义样式 | |
| scroll | shape | 滚动配置 | ||
| tableLayout | enum | 表格布局，当 scroll.x 有值时为 fixed，其它时候默认为 auto，可自行覆盖 | ||
| rowKey | union | 'key' | 定义如何获取每行的键值 | |
| zebraCrossing | bool | 是否有斑马线，存在子表格时，斑马线样式可能会错乱 | ||
| components | shape | 自定义表格组件，慎用 | ||
| defaultOrder | shape | 默认排序设置，key 为 column key，state 为升序(asc)或降序(desc) | ||
| order | shape | 受控排序设置，key 为 column key，state 为升序(asc)或降序(desc) | ||
| onConditionChange | func | 表格的筛选等条件变更时的回调 @param 变更的数据@param 排序@param 筛选@param 搜索 | ||
| doNotHandleCondition | bool | order、filter、searchValue、pagination变化时表格内部不处理 | ||
| contextMenu | func | 右键菜单 @param 该行的记录值 |
说明
- Table 表格组件，通过传入 column 和 dataSource 来快速生成表格，内置搜索、滚动、表格列固定等功能。
- 为了确保数据的准确性请务必保证每条数据存在有效不重复的 key 或者使用 rowKey 来指定 key 的获取方式，表格中将会依照 key 来进行选择等操作。不传入将会使用数据在每一页中的 index 来作为 key，可能会造成 key 重复而导致错误，甚至造成各种奇怪的错误现象。
- rowKey 支持函数，第二个参数为 record 在当前页面的 index，强烈不推荐使用！！！请务必注意。
演示
属性调试
基本使用
columns - 表格列属性定义
emptyContent - 自定义空表格提示
errorContent - 报错提示内容
scroll - 滚动定义
title - 自定义表格顶部内容
footer - 自定义表格底部内容
pagination - 自定义分页设置
rowKey - 定义 key 的获取
contextMenu - 右键菜单
filter - 筛选
order - 排序
expandedRowRender - 扩展内容渲染
hideExpandIcon - 隐藏扩展列展开按钮
expandedRowKeys - 展开列
defaultExpandAllRows - 默认展开扩展列
使用时务必注意 rowKey 的使用，使用此属性可能会影响到表格的性能
onRow - 设置行 props
onHeaderRow - 设置表头 props
rowSelection - 列选择配置
dragSorting - 列选择配置
fixed - 固定表头、列
columnResizable - 可调表头大小
需要在回调中自行控制 column width
列分组
子表格
onConditionChange - 由于 pagination 的某些设计，onConditionChange 返回值中不包含 pagination 变化，要监听 pagination 请使用 pagination 参数
doNotHandleCondition - 自行处理筛选等逻辑
远程加载数据
后端分页、搜索、筛选、排序
popupContainer - 弹出层容器
单元格合并
demo - 样例演示
ActionList
Props
说明
- ActionList 已经抽离为外层组件，请使用 ActionList 替换 Table.ActionList
演示
演示
ColumnConfigButton
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| modalProps | object | 弹窗的props |
说明
- 这是 ColumnConfigButton 表头配置弹窗按钮
- 使用 context 和 table 通信，所以需要嵌入到 table 中才起作用（title，footer）
演示
columnConfigButton
modalProps - 弹窗自定义 props 设置
HoverDisplayArea
Props
| Prop Name | Type | Required | Default | Description |
|---|
说明
- 用于表单列中 hover 时才展示的元素，为了防止 hover 时宽度变化导致抖动，使用 visibility 来控制隐藏。
演示
HoverDisplayArea
SearchInput
Props
说明
- 这是 SearchInput 表格搜索框
- 使用 context 和 table 通信，所以需要嵌入到 table 中才起作用（title，footer）
- 自定义搜索配合 Table.handleSearch 使用
- 支持所有 Input 的 props