使用Ant Design table 生成一段重新渲染表格的代码
以下是使用Ant Design table重新渲染表格的代码示例:
import React, { useState } from 'react';
import { Table } from 'antd';
const initialData = [
{ name: 'John', age: 25, address: 'New York' },
{ name: 'Peter', age: 30, address: 'San Francisco' },
{ name: 'Mary', age: 28, address: 'Los Angeles' },
];
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
];
const App = () => {
const [data, setData] = useState(initialData);
const handleButtonClick = () => {
setData([
{ name: 'James', age: 24, address: 'Chicago' },
{ name: 'Sam', age: 32, address: 'Seattle' },
{ name: 'Lucy', age: 27, address: 'Boston' },
]);
};
return (
<div>
<Table dataSource={data} columns={columns} />
<button onClick={handleButtonClick}>Reload Table</button>
</div>
);
};
export default App;
此代码创建一个包含按钮的组件,当单击按钮时,将重新渲染表格,并用新数据替换原始数据。重新渲染表格时,Ant Design table会自动更新表格的内容
原文地址: https://www.cveoy.top/t/topic/ckeJ 著作权归作者所有。请勿转载和采集!