如何使用?
使用请求将列表数据拿过来之后,将列表的值赋给Table中的 dataSource 属性即可
dataSource 设置的是表格的数据源,为一个数组。例如:
const dataSource = [ { key: '1', name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', }, { key: '2', name: '胡彦祖', age: 42, address: '西湖区湖底公园1号', }, ]; <Table dataSource={dataSource} columns={columns} />;
接下来,为Table添加columns属性进行表格列的配置描述:
const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', }, { title: '住址', dataIndex: 'address', key: 'address', }, ]; <Table dataSource={dataSource} columns={columns} />;
columns属性的值也为数组类型
数据的每一项对应表格每一列的配置,其中title属性设置的是每一列的表头名称,dataIndex属性设置的是当前列中的表格数据源中对应每一项的属性,也就是给dataSource的这个数组。
例如:
const dataSource=[ { name:'名称', id:1, }, { name:'名称2', id:2, }, ]; const columns=[ { title:'名称', dataIndex:'name', }, { title:'ID', dataIndex:'id', }, ] <Table dataSource={dataSource} columns={columns} />;
