1.0.6 • Published 6 years ago
Table 表格组件
安装使用
import Table from 'ue-table';
参数说明
| 参数 | 说明 |
|---|
| columns | 单元表格控制名称, 见下述详细说明 | Array({ object }) |
| dataSource | 数据源数据 | Array |
| rowKey | 表格行的取值 可当做key值使用 | string |
| rowClassName | 表格行的类名 | string |
| expandedRowRender | 拓展行内容 ReactNode 以点击行出现下拉为表现形式 | Function |
| expandRowByClick | 通过点击行来进行展开 | boolean |
| total | 是否展示总计行 | boolean |
| toggleSortOrder | 点击排序按钮的回调函数 toggleSortOrder({column}) | Function |
| defaultSorter | 默认排序的字段名称 | string |
| onRowClick | 点击行的回调函数 onRowClick(record, index, event) | Function |
| total | 是否展示总计数据 | boolean |
columns
| 参数 | 说明 |
|---|
| title | 表头名称 | string |
| renderTitle | ReactNode | - |
| dataIndex | 对应接口的字段名称 | string |
| key | React 需要的 key, 如果未设置唯一的 dateIndex, 可以使用这个代替 | string |
| sorter | 后端按照某个字段进行排序 | string |
| sortOrder | 排序的受控属性 值为 0 或者 1 | string |
| visible | 列的可见性控制 | boolean |
| total | 列总计数据 | - |
| align | 文字的对齐方式 'left','right','center' | string |
| render | 生成复杂的单列的渲染函数 Function({record}) | - |
| style | 表格样式 | - |
使用示例
const columns = [
{
title: '',
style: {},
dataIndex: 'name',
render: ({record}) => {
return (
<span>{record.name}</span>
)
},
}
];
<Table
columns={columns}
dataSource={dataSource}
rowKey="uid"
/>