name: MSTable route: /table order: 2 menu: Components menuOrder: 2

import { Playground } from 'docz' import MSTable from './src'

MSTable 表格组件

本组件是在 antd 的 Table 组件基础上进行封装，把常见的功能集成起来，让开发者更少的关心内部繁多的属性设置。包括：dataSource 和 pagination 属性由 data 代替；分页功能默认集成跳转、总数目等功能，并暴露出可选数目项；rowKey 默认使用 id ，强制统一为字符串类型；集成可选择功能，开发者只用关心当前选择项即可等等。此外，完全保留 antd Table 的其他 props ，并优先此组件的设置。

Props

除下面表格外，其他 props 和 antd 的 Table 保持一致，如必传的 columns。具体使用方法请参考示例。

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------ | ------ | ------ | ------ | ------ | | data | 包括表格数据 list 和分页数据 pagination | { data: T[]; pagination?: PaginationConfig | false } | { data: [], pagination: { pageSize: 10 } } | v0.0.1 | | rowKey? | 表格行 key 的取值，可以是字符串或一个函数 | string | ((record: T, index: number) => string) | 'id' | v0.0.1 | | onSelectEvent? | antd 中 onSelectChange 的额外回调，可供外界操作表格内选中的数据 | (selectedRowKeys: string[], checkedAll: boolean, selectedRows: any[]) => void | | v0.0.1 | | onCheckboxProps? | 针对 Checkbox 单独做判断，比如某条数据要求当前选择框为禁用状态，和 antd 的 getCheckboxProps 保持一致 | (record: T) => Object | | v0.0.1 |

基础表格

复杂表格

const handleSelectEvent = (selectedRowKeys, selectedRows) => {
  console.log('selectedRowKeys: ', selectedRowKeys)
  console.log('selectedRows: ', selectedRows)
}

const handleCheckboxProps = (record) => ({
  disabled: record.fruit_id <= 4
})

const handleTableChange = ({ current }) => console.log(`第${current}页`)

return (
  <MSTable
    data={{ list }}
    columns={columns}
    rowKey="fruit_id"
    onSelectEvent={handleSelectEvent}
    onCheckboxProps={handleCheckboxProps}
    onChange={handleTableChange}
  />
)

}}