| 表格 Table | 您所在的位置：网站首页 › antd table column隐藏 › 表格 Table |
表格 Table
|
API#Table#参数说明类型默认值版本tableLayout表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局- | 'auto' | 'fixed'无固定表头/列或使用了 column.ellipsis 时，默认值为 fixed3.24.0bordered是否展示外边框和列边框booleanfalsechildrenColumnName指定树形结构的列名string[]children3.4.2columns表格列的配置描述，具体项见下表ColumnProps[]-components覆盖默认的 table 元素TableComponents-dataSource数据数组any[]defaultExpandAllRows初始时，是否展开所有行booleanfalsedefaultExpandedRowKeys默认展开的行string[]-expandedRowKeys展开的行，控制属性string[]-expandedRowRender额外的展开行Function(record, index, indent, expanded):ReactNode-expandIcon自定义展开图标，参考示例Function(props):ReactNode-3.11.3expandRowByClick通过点击行来展开子行booleanfalse3.0.1expandIconColumnIndex展开的图标显示在哪一列，如果没有 rowSelection，默认显示在第一列，否则显示在选择框后面numberfooter表格尾部Function(currentPageData)indentSize展示树形数据时，每层缩进的宽度，以 px 为单位number15loading页面是否加载中boolean|object (更多)falselocale默认文案设置，目前包括排序、过滤、空数据文案objectfilterConfirm: '确定' filterReset: '重置' emptyText: '暂无数据' 默认值pagination分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页objectrowClassName表格行的类名Function(record, index):string-rowKey表格行 key 的取值，可以是字符串或一个函数string|Function(record):string'key'rowSelection表格行是否可选择，配置项objectnullscroll表格是否可滚动，配置项object-showHeader是否显示表头booleantruesize表格大小default | middle | smalldefaulttitle表格标题Function(currentPageData)onChange分页、排序、筛选变化时触发Function(pagination, filters, sorter, extra: { currentDataSource: [] })onExpand点击展开图标时触发Function(expanded, record)onExpandedRowsChange展开的行变化时触发Function(expandedRows)onHeaderRow设置头部行属性Function(column, index)-onRow设置行属性Function(record, index)-getPopupContainer设置表格内各类浮层的渲染节点，如筛选菜单(triggerNode) => HTMLElement() => TableHtmlElement3.21.0onRow 用法# 适用于 onRow onHeaderRow onCell onHeaderCell。 { return { onClick: event => {}, // 点击行 onDoubleClick: event => {}, onContextMenu: event => {}, onMouseEnter: event => {}, // 鼠标移入行 onMouseLeave: event => {}, }; }} onHeaderRow={column => { return { onClick: () => {}, // 点击表头行 }; }} />Column#列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 参数说明类型默认值版本align设置列的对齐方式'left' | 'right' | 'center''left'3.3.2ellipsis超过宽度将自动省略，暂不支持和排序筛选一起使用。设置为 true 时，表格布局将变成 tableLayout="fixed"。booleanfalse3.24.0className列样式类名string-colSpan表头列合并,设置为 0 时，不渲染numberdataIndex列数据在数据项中对应的 key，支持 a.b.c、a[0].b.c[1] 的嵌套写法string-defaultFilteredValue默认筛选值string[]-defaultSortOrder默认排序顺序'ascend' | 'descend'-3.9.3filterDropdown可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互React.ReactNode | (props: FilterDropdownProps) => React.ReactNode-filterDropdownVisible用于控制自定义筛选菜单是否可见boolean-filtered标识数据是否经过过滤，筛选图标会高亮booleanfalsefilteredValue筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组string[]-filterIcon自定义 filter 图标。ReactNode|(filtered: boolean) => ReactNodefalsefilterMultiple是否多选booleantruefilters表头的筛选菜单项object[]-fixed列是否固定，可选 true(等效于 left) 'left' 'right'boolean|stringfalsekeyReact 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性string-render生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并Function(text, record, index) {}-sorter排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 trueFunction|boolean-sortOrder排序的受控属性，外界可用此控制列的排序，可设置为 'ascend' 'descend' falseboolean|string-sortDirections支持的排序方式，取值为 'ascend' 'descend'Array['ascend', 'descend']3.15.2title列头显示文字（函数用法 3.10.0 后支持）ReactNode|({ sortOrder, sortColumn, filters }) => ReactNode-width列宽度（指定了也不生效？）string|number-onCell设置单元格属性Function(record, rowIndex)-onFilter本地模式下，确定筛选的运行函数Function-onFilterDropdownVisibleChange自定义筛选菜单可见变化时调用function(visible) {}-onHeaderCell设置头部单元格属性Function(column)-ColumnGroup#参数说明类型默认值版本title列头显示文字string|ReactNode-pagination#分页的配置项。 参数说明类型默认值版本position指定分页显示的位置'top' | 'bottom' | 'both''bottom'3.3.0更多配置项，请查看 Pagination。 rowSelection#选择功能的配置。 参数说明类型默认值版本columnWidth自定义列表选择框宽度string|number60px3.3.0columnTitle自定义列表选择框标题string|React.ReactNode-3.8.0fixed把选择框列固定在左边boolean-getCheckboxProps选择框的默认属性配置Function(record)-hideDefaultSelections自定义选择项时去掉『全选』『反选』两个默认选项booleanfalseselectedRowKeys指定选中项的 key 数组，需要和 onChange 进行配合string[]|number[][]selections自定义选择项 配置项, 设为 true 时使用默认选择项object[]|booleantruetype多选/单选，checkbox or radiostringcheckboxonChange选中项发生变化时的回调Function(selectedRowKeys, selectedRows)-onSelect用户手动选择/取消选择某行的回调Function(record, selected, selectedRows, nativeEvent)-onSelectAll用户手动选择/取消选择所有行的回调Function(selected, selectedRows, changeRows)-onSelectInvert用户手动选择反选的回调Function(selectedRows)-scroll#参数说明类型默认值版本x设置横向滚动，也可用于指定滚动区域的宽和高，可以设置为像素值，百分比，true 和 'max-content'number | true-y设置纵向滚动，也可用于指定滚动区域的宽和高，可以设置为像素值，百分比，true 和 'max-content'number | true-scrollToFirstRowOnChange当分页、排序、筛选变化后是否滚动到表格顶部boolean-3.24.0selection#参数说明类型默认值版本keyReact 需要的 key，建议设置string-text选择项显示的文字string|React.ReactNode-onSelect选择项点击回调Function(changeableRowKeys)-在 TypeScript 中使用#import { Table } from 'antd'; import { ColumnProps } from 'antd/es/table'; interface User { key: number; name: string; } const columns: ColumnProps[] = [{ key: 'name', title: 'Name', dataIndex: 'name', }]; const data: User[] = [{ key: 0, name: 'Jack', }]; class UserTable extends Table {} // 使用 JSX 风格的 API class NameColumn extends Table.Column {} // TypeScript 2.9 之后也可以这样写 // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements 注意#按照 React 的规范，所有的数组组件必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
如果 dataSource[i].key 没有提供，你应该使用 rowKey 来指定 dataSource 的主键，如下所示。若没有指定，控制台会出现以上的提示，表格组件也会出现各类奇怪的错误。 // 比如你的数据主键是 uid return ; // 或 return record.uid} />; |
【本文地址】
公司简介
联系我们