以下是使用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会自动更新表格的内容

使用Ant Design table 生成一段重新渲染表格的代码

原文地址: https://www.cveoy.top/t/topic/ckeJ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录