1.0.0 • Published 5 years ago
@moresec/rc-table v1.0.0
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}
/>
)}}