--- title: Grid subtitle: 表格 path: component/grid group: 信息展示 --- ## Grid 表格 表格组件，`Grid` 使用 `` 标签实现的。 ### API | 参数 | 说明 | 类型 | 默认值 | 是否必须 | | --------------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------ | -------- | | columns | 表格列配置 | array | | 是 | | datasets | 需要展示的数据 | array | | 是 | | rowKey | 每一行的 key | string | `id` | 否 | | tableLayout | 表格元素的 table-layout 属性 | - \| 'auto' \| 'fixed' | | 否 | | onChange | 列表发生变化时自动触发的函数，页面筛选、排序均会触发 | (conf: any) => any | `noop` | 否 | | scroll | 横向或纵向指定滚动区域的宽高度 | { x?: number, y?: number } | | 否 | | sortBy | 根据哪一个字段排序, 应该等于 columns 中某一个元素的`key`字段 | string | '' | 否 | | sortType | 排序方式 | string | '' | 否 | | defaultSortType | 第一次点击的排序方式 | string | `'desc'` | 否 | | emptyLabel | 列表为空时的提示文案 | string | `'没有更多数据了'` | 否 | | selection | 表格的选择功能配置 | object | | 否 | | expandation | 展开配置 | object | | 否 | | loading | 表格是否处于 loading 状态 | bool | `false` | 否 | | className | 自定义额外类名 | string | `''` | 否 | | rowClassName | 表格行的类名 | string \| (data: object, rowIndex: number) => string | '' | 否 | | pageInfo | table 对应的分页信息 | object | null | 否 | | paginationType | 分页器类型，可选 `'lite'` \| `'mini'` | string | `'default'` | 否 | | onRowClick | 点击行时触发 | (data: any, index: number, event: Event) => any | | 否 | | ellipsis | 是否需要文字超出宽度后省略号显示 (需配置 columns 中的 noWrap) | bool | false | 否 | | onExpand | 点击展开图标时触发 | (data: {expanded: boolean, data: any, event: Event, index: number}) => any | | 否 | | components | 自定义 table 内的组件 | object { row?: ComponentType } | | 否 | | rowProps | 自定义传入 row 的属性 | (data: any, index: number) => object | | 否 | | bordered | 是否展示外边框和列边框 | bool | `false` | 否 | | batchRender | 批量操作 render | (data: array, position?: 'header' \| 'foot') => React.ReactNode | | 否 | | stickyBatch | 是否要将批量操作保持在屏幕内 | bool | `false` | 否 | | autoStick | 是否自动将 head stick 到窗口 | bool | `false` | 否 | | autoStickOffsetTop | 自定义表头吸顶的 offsetTop | number | `0` | 否 | | disableHoverHighlight | 禁用鼠标 hover 高亮效果 | boolean | `false` | 否 | | loadingProps | 基于 `BlockLoading` 的自定义加载属性 | `Omit` | - | 否 | | size | 表格尺寸 | string | `'medium'` | 否 | #### onChange 函数声明 onChange 会抛出一个对象，这个对象包含分页变化的参数： ```js { current, // {Number} 表示当前第几页 sortBy, // {String} 表示基于什么key进行排序 sortType, // {String} ['asc', 'desc', ''] 排序的方式 pageSize, // {Number} 表示每页数量 } ``` #### Columns | 参数 | 说明 | 类型 | 是否必须 | | ------------ | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- | | title | 列头的名称 | ReactNode | 是 | | name | 对应数据中的 key (建议设置) | string | 否 | | width | 列表宽度 | string \| number | 否 | | bodyRender | 渲染复杂组件 | ((data: any, pos: {row: number, column: number, fixed?: 'left' \| 'right'}, name: string) => ReactNode) \| ReactNode | 否 | | className | 列头的 className | string | 否 | | needSort | 是否支持排序 (使用此功能 请设置 name) | bool | 否 | | colSpan | 列合并 当为 0 时不渲染 | number | 否 | | fixed | 是否固定列 可选值为 `left` `right` `true` (`true` 与 `left` 等效) | bool \| strig | 否 | | onCellClick | 点击单元格回调 | (data: any, event: Event) => any | 否 | | textAlign | 文本对齐方式 | string | 否 | | noWrap | 是否换行 默认换行 | bool | 否 | | defaultText | 默认显示文字 | ReactNode | 否 | | isValueEmpty | 判断是否显示默认文字 | (value: any) => boolean | 否 | | children | 渲染分组表头 | array | 否 | #### Selection | 参数 | 说明 | 类型 | 是否必须 | | ----------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------- | | selectedRowKeys | 默认选中 | array | 否 | | onSelect | 每次 check 的时候触发的函数 | (selectedKeys: string[], selectedRowsInCurrentPage: Array, changedRows: any \| any[]) => any | 否 | | getCheckboxProps | **废弃，请使用 getSelectionProps** 选择框/单选框 属性配置 | (data: object) => { disabled?: boolean, indeterminate?: boolean, reason?: ReactNode } | 否 | | getSelectionProps | 选择框/单选框 属性配置 (当前支持 disabled, indeterminate) | (data: object) => { disabled?: boolean, indeterminate?: boolean, reason?: ReactNode } | 否 | | isSingleSelection | 是否是单选 | bool | 否 | #### pageInfo | 参数 | 说明 | 类型 | 是否必须 | | --------------- | ---------- | -------- | -------- | | total | 总条目个数 | number | 否 | | pageSize | 每页个数 | number | 否 | | pageSizeOptions | 分页选项 | number[] | 否 | | current | 当前页码 | number | 否 | ### ColumnProvider 支持 `column` 的所有参数。 ### Expandation | 参数 | 说明 | 类型 | 默认值 | 是否必须 | | ------------ | ------------------------ | --------------------------------------- | ------ | -------- | | isExpanded | 是否展开当前行 | (record: any, index: number) => boolean | | 否 | | isExpandable | 是否显示当前行可展开图标 | (record: any, index: number) => boolean | | 否 | | expandRender | 展开行的补充内容 render | (data: any) => React.ReactNode | | 否 |