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