ddu design pro表格设计
基础使用
最基础的表格，通过设置columns和data来进行展示
可选择
设置rowSelection属性来进行行选择
带边框
设置bordered来进行边框的显示隐藏
行/列合并
通过设置colSpan属性来进行行/列的合并
固定列
通过设置fixed属性来固定列
可编辑单元格
可编辑行
分页设置
通过设置pagination来进行分页设置
API
Table
| 属性名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 表格列的配置描述 | ColumnsType[] | - |
| data | 数据数组 | [] | - |
| loading | 是否进行加载 | boolean | false |
| pagination | 分页设置 | pagination | - |
| rowKey | 每行唯一标识 | string | number | - |
| rowSelection | 表格行是否可选择 | rowSelection | - |
| onChange | 分页、筛选变化时触发 | (pagination, filter) => {} | - |
ColumnsType
| align | 设置列的对齐方式 | left | right | center | left |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | - |
| fixed | 列是否固定 left right | string | - |
| key | 唯一的 dataIndex | string | - |
| render | 生成复杂数据的渲染函数 | (text, record, index) => {} | - |
| width | 列宽度 | string | number | - |
pagination
| current | 当前页数 | number | 1 |
| pageSize | 每页条数 | number | 10 |
| pageSizeOptions | 指定每页可以显示多少条 | string[] | [10, 20, 50, 100] |
| total | 数据总数 | number | 0 |
| onChange | 页码或 pageSize 改变的回调 | (page, pageSize) => {} | - |
| showTotal | 用于显示数据总量 | boolean | false |
| showSizeChanger | 是否展示 pageSize 切换器 | boolean | false |
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
rowSelection
| selectedRowKeys | 指定选中项的 key 数组 | string[] | number[] | [] |
| type | 多选/单选 | checkbox | radio | checkbox |
| onChange | 选中项发生变化时的回调 | (selectedRowKeys, selectedRows) => {} | - |
| onSelect | 用户手动选择/取消选择某行的回调 | (record, selected, selectedRows) => {} | - |
| onSelectAll | 用户手动选择/取消选择所有行的回调 | (selected, selectedRows, changeRows) => {} | - |