category: Components type: UI Views component: Base chinese: 表格 english: CNTable

表格组件，基于 next 的 Table 组件，封装若干业务需要的功能。

规则

关于 primaryKey 属性的说明

原则上表格组件中显示的每一条数据需要一个唯一标识的 key（类似数据库中的 Primary Key），见 primaryKey 属性，默认为每条数据的 id 字段，如果数据中没有该要求，需要对应更改 primaryKey 属性。primaryKey 用于表格组件内部状态的维护，及在 rowSelection，expandedRow，openRowKeys 等功能中标识每一条数据等。简单的数据展示一般无需 primaryKey，但是若涉及到更加复杂的功能则需要配置。

API

CNTable

| 成员 | 说明 | 类型 | 默认值 | |---|---|---|---| |prefix|样式类名的品牌前缀|string|"next-"| |className|自定义类名|string|N/A| |style|自定义内联样式|object|N/A| |dataSource|表格展示的数据源|any[]|[ ]| |rowSelection| 是否启用选择模式属性:getProps: (record: object) => object 获取selection的默认属性（支持禁用、隐藏选择框）onChange: (selectedRowKeys: string[], records: object[]) => void 选择改变的时候触发的事件，注意: 其中 records 参数只会包含当前 dataSource 的数据，很可能会小于 selectedRowKeys 的长度。onSelect: (selected: boolean, record: object, records: object[]) => void 用户手动选择/取消选择某行的回调onSelectAll: (selected: boolean, records: object) => void 用户手动选择/取消选择所有行的回调selectedRowKeys: string[] 设置了此属性,将 rowSelection 变为受控状态，接收值为该行数据的 primaryKey 的值mode: string 选择selection的模式，可选值为 "single", "multiple"，默认为 "multiple"lock: boolean 是否对选框列启用锁列，默认为 false（如果有其他列设置了锁列，该锁列自动启用）|object|null| |onRowClick|点击表格每一行触发的事件参数:record: object 该行所对应的数据index: number 该行所对应的序列e: Event DOM事件对象|(record: object, index: number, e: Event) => void|默认不执行任何操作| |onRowMouseEnter|悬浮在表格每一行的时候触发的事件参数:record: object 该行所对应的数据index: number 该行所对应的序列e: Event DOM事件对象|(record: object, index: number, e: Event) => void|默认不执行任何操作| |onRowMouseLeave|离开表格每一行的时候触发的事件参数:record: object 该行所对应的数据index: number 该行所对应的序列e: Event DOM事件对象|(record: object, index: number, e: Event) => void|默认不执行任何操作| |onSort|点击列排序触发的事件参数:dataIndex: string 指定的排序的字段order: string 排序对应的顺序, 有 "desc" 和 "asc" 两种|(dataIndex: string, order: string) => void|默认不执行任何操作| |onFilter| 点击过滤确认按钮触发的事件参数:filterParams: object 过滤的字段信息|(filterParams: object) => void|默认不执行任何操作| |getRowClassName|设置每一行的样式名称参数:record: object 该行所对应的数据index: number 该行所对应的序列返回值: string 需要设置的样式名称|(record: object, index: number) => string|默认为空| |getRowProps|设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效。参数:record: object 该行所对应的数据index: number 该行所对应的序列返回值: object 需要设置的行属性|(record: object, index: number) => object|默认为空| |getCellProps|设置单元格的属性，通过该属性可以进行合并单元格参数:rowIndex: number 该列所对应的序列colIndex: number 该行所对应的序列record: object 该行对应的记录返回值: object 返回td元素的所支持的属性对象|(rowIndex: number, colIndex: number, record: object) => object|默认为空| |fixedHeader|表头是否固定，该属性配合 maxBodyHeight 使用，当内容区域的高度超过 maxBodyHeight 的时候，在内容区域会出现滚动条|boolean|false| |maxBodyHeight|最大内容区域的高度,在 fixedHeader 为 true 的时候,超过这个高度会出现滚动条|number|200| |hasBorder|表格是否具有边框|boolean|true| |hasHeader|表格是否具有头部|boolean|true| |isZebra|表格是否是斑马线|boolean|false| |isLoading|表格是否在加载中|boolean|false| |primaryKey|dataSource 中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中|string|id| |filterParams|当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}}示例: 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中<Table filterParams={{id: {selectedKeys: ['one']}}}/>|object|N/A| |sort|当前排序的字段,使用此属性可以控制表格的字段的排序,格式为 { dataIndex: "asc" }|object|N/A| |expandedRowRender|额外渲染行的渲染逻辑函数参数:record: object 该行所对应的数据index: number 该行所对应的序列返回值: Element 该行的内容|(record: object, index: number) => Element|N/A| |expandedRowKeys|默认情况下展开的额外渲染行, 传入此属性为受控状态|string[]|N/A| |onExpandedChange| 在额外渲染行展开或者收齐的时候触发的事件参数:expandedRowKeys: string[] 展开的渲染行的keycurrentRowKey: string 当前点击的渲染行的keyexpanded: boolean 当前点击是展开还是收起currentRecord: object 当前点击额外渲染行的记录|(expandedRowKeys: string[], currentRowKey: string, expanded: boolean, currentRecord: object) => void| 默认不执行任何操作| |expandedRowIndent|额外渲染行的缩进|number[]|[1, 0]| |hasExpandedRowCtrl|是否显示点击展开额外渲染行的+号按钮|boolean|true| |lockExpandedRowCtrl|是否对额外渲染行的+号按钮启用锁列（如果有其他列设置了锁列，该锁列自动启用）|boolean|false| |onExpandedRowClick|点击额外渲染行触发的事件参数:record: object 该行所对应的数据index: number 该行所对应的序列e: Event DOM事件对象|(record: object, index: number, e: Event) => void|默认不执行任何操作| |getExpandedColProps|设置额外渲染行的属性|() => void|默认为空| |isTree| 开启Table的tree模式, 接收的数据格式中包含children则渲染成 Tree Table|boolean|false| |openRowKeys|默认情况下展开的树形表格，传入了此属性代表tree的展开为受控操作|any[]|N/A| |onRowOpen|点击 tree 展开或者关闭的时候触发的事件参数:openRowKeys: string[] tree 模式下展开的keycurrentRowKey: string 当前点击行的keyopened: boolean 当前点击是展开还是收起currentRecord: object 当前点击行的记录|(openRowKeys: string[], currentRowKey: string, currentRecord: object) => void|默认不执行任何操作| |indentSize| 在tree模式下的缩进尺寸，仅在isTree为true时候有效|number|12| |treeArrowIndent| 设置在 Tree 模式下，树箭头所在的列 |number|0| |defaultExpandAll|当启用树状表格模式（isTree）时，是否默认展开所有节点（并展开所有可能的新增节点）。仅在 isTree 为 true 且展开不受控（不设置 openRowKeys）时有效。|boolean|false| |optimization| 是否开启性能优化，开启了性能优化后，会自动加入 shouldComponentUpdate|boolean|false| |locale|自定义国际化文案对象属性:empty: string 没有数据时的提示文案ok: string 过滤器中确认按钮文案reset: string 过滤器中重置按钮文案|object|{"empty": "没有数据", "ok": "确认", "reset": "重置""}| |language| 自定义国际化语言可选值:"en-us", "zh-cn", "zh-tw"|string|N/A| |fixedScrollbar|设为 true 时，则当表格在页面内可见，且具有横向滚动条时，保证表格的横向滚动条始终在用户可视范围内。由于 CNTable 组件默认为自适应宽度（字段内内容过多时会折行或利用 wrap 属性显示省略号），使用时请确定 CNTable 组件自身的宽度受到有效的限制。|boolean|false| |getRowHighlighted|设置某一行是否被高亮，如果对某一行的数据返回 true，该行将被显示为高亮状态。被高亮的行将会采用特殊的样式，被高亮的行只有样式的区别，不影响页面逻辑。|(record: object, index: number) => boolean|默认返回 false| |useAutomaticLayout|自适应布局，列宽是否自适应单元格内容长度。启用该属性后表格将采用完全不同的布局算法。|boolean|false|

CNTable.Column

| 成员 | 说明 | 类型 | 默认值 | |------|-----------------------------------|----------|--------| |dataIndex|指定列在 dataSource 每一项中对应的字段，支持 a.b 形式的快速取值|string|N/A| |cell|该列单元格内容渲染的逻辑。其中参数 record 为该行所对应的 dataSource 中的项，index 为当前行的索引（在 dataSource 中是第几项），value 为 dataSource[index][dataIndex] 的值，相当于不写 cell 时，单元格将会渲染的内容。|Element 或 (value: any, index: number, record: any) => Element|默认返回 value，即 dataIndex 指定的值| |title|该列表头显示的内容|Element 或 () => Element|"column"| |sortable|是否支持排序|boolean|false| |width|在锁列的情况下需要配置的宽度|number|N/A| |align|单元格中内容的对齐方式。可选值:"left", "center", "right" |"left" 或 "center" 或 "right"|N/A| |filters|生成标题过滤的菜单, 格式为 [{ label: "xxx", value:"xxx" }]|object[]|N/A| |filterMode| 过滤的模式是单选还是多选可选值:"single", "multiple" |"single" 或 "multiple"|"multiple"| |lock|是否支持锁列，可选值为 "left","right", true|true 或 "left" 或 "right"|N/A| |wrap|单元格内容超出列宽时是否自动换行，设为 false 则在一行内展示，并使用省略号代替未显示的部分|string|true| |titleTooltip|该列表头的提示信息|string|N/A| |contentTooltip|鼠标悬浮在本列单元格上，是否弹出全部信息的弹层。为 "overflow-only" 时，只在内容较长被省略号省略（wrap={false}）时才显示。|boolean 或 "overflow-only"|false| |copy|鼠标悬浮在本列单元格上，是否弹出复制弹层|boolean|false| |onBeforeCopy|执行复制操作时获取复制内容的逻辑，返回值将被复制到剪贴板，参数的意义同 cell 相同。|(value: any, index: number, record: any) => string|默认返回 value 参数| |onCopy|复制操作完成后的回调，第一个 value 参数是实际复制到剪贴板中的字符串值，其他参数的意义同 cell 属性相同。|(value: string, index: number, record: any) => void |false| |clickToSelectRow|点击该列中的单元格后是否选中该行，启用后可使得用户的选择操作更加方便|boolean|false| |onClick|该列中单元格的点击回调函数，参数的意义同 cell 属性相同。|(value: any, index: number, record: any) => void|N/A| |minWidth|（仅在自适应布局下有效）该列的最小列宽，仅支持以 px 为单位的绝对长度|number|N/A| |greedy|（仅在自适应布局下有效）在不 wrap 的情况下是否尽量撑开列宽，设置为 true 则该列会拉伸以使单元格内所有文字能在单行内显示，列宽最大值为 maxWidth，内容超出则折行|boolean|false| |maxWidth|（仅在自适应布局下有效）该列的最大列宽，仅支持以 px 为单位的绝对长度|number|N/A| |autoMinWidth|（仅在自适应布局下有效）为 true 时，根据 title 自适应最小宽度，此时 minWidth 属性无效|boolean|false|

CNTable.ColumnGroup

| 成员 | 说明 | 类型 | 默认值 | |------|-----------------------------------|----------|--------| |title|表头显示的内容|Element 或 () => Element|"column-group"|