使用Ant Design table 生成一段动态更新table数据的代码
以下是使用Ant Design table生成动态更新table数据的代码示例:
import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const DynamicTable = () => {
const [data, setData] = useState([]);
useEffect(() => {
// 模拟异步获取数据
setTimeout(() => {
setData([
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
]);
}, 1000);
}, []);
return (
<Table columns={columns} dataSource={data} pagination={false} />
);
};
export default DynamicTable;
在上面的代码中,我们使用了React的useState和useEffect钩子来管理动态更新的table数据。useState用于定义data状态,useEffect则在组件渲染完成后异步获取数据并更新data状态。
使用上述代码,我们可以在页面上渲染一个带有三行数据的table,数据将在1秒后异步获取
原文地址: https://www.cveoy.top/t/topic/chZK 著作权归作者所有。请勿转载和采集!