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"
/>