ant design table 请求 渲染 代码示例
时间: 2023-09-08 16:10:25 浏览: 55
以下是一个简单的示例代码,使用 Ant Design 的 Table 组件来渲染一个请求返回的数据:
```javascript
import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import axios from 'axios';
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
];
const MyTable = () => {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('/api/data').then((response) => {
setData(response.data);
});
}, []);
return <Table dataSource={data} columns={columns} />;
};
export default MyTable;
```
这个示例中,我们使用了 Ant Design 的 Table 组件,并定义了表格的列信息。在组件的 state 中,我们使用了 `useState` hook 来存储从 API 返回的数据。在 `useEffect` hook 中,我们使用了 Axios 来请求数据,并在请求完成后更新组件的 state。最后,我们将数据源和列信息传递给 Table 组件来渲染表格。