如何将动态列和行数据推送到antd表中

在antd表中推送动态列和行数据，可以通过以下步骤实现：

动态列数据推送：
- 首先，定义一个存储列数据的数组，例如columns。
- 在需要动态更新列数据的地方，通过操作columns数组来添加、删除或修改列。
- 使用setState或其他状态管理工具更新组件的状态，使表格重新渲染。

动态行数据推送：
- 定义一个存储行数据的数组，例如data。
- 在需要动态更新行数据的地方，通过操作data数组来添加、删除或修改行。
- 使用setState或其他状态管理工具更新组件的状态，使表格重新渲染。

下面是一个示例代码：

import React, { useState } from 'react';
import { Table } from 'antd';

const DynamicTable = () => {
  const [columns, setColumns] = useState([]);
  const [data, setData] = useState([]);

  // 添加动态列
  const addColumn = () => {
    const newColumn = {
      title: 'New Column',
      dataIndex: 'newColumn',
      key: 'newColumn',
    };
    setColumns([...columns, newColumn]);
  };

  // 添加动态行
  const addRow = () => {
    const newRow = {
      key: data.length + 1,
      name: 'John Doe',
      age: 30,
      address: 'New York',
    };
    setData([...data, newRow]);
  };

  return (
    <div>
      <button onClick={addColumn}>Add Column</button>
      <button onClick={addRow}>Add Row</button>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};

export default DynamicTable;

在这个示例中，点击"Add Column"按钮将会在表格中添加一个名为"New Column"的动态列，点击"Add Row"按钮将会在表格中添加一行数据。你可以根据实际需求修改列和行的数据结构。

腾讯云相关产品和产品介绍链接地址：