时间戳

首页 > 解决方案 > 如何从antd中的数据动态创建列？

reactjs - 如何从antd中的数据动态创建列？

问题描述

我想使用 antd 创建一个可重用的数据表组件，其中列从数据动态创建。我怎样才能做到这一点？

这是我的代码：

 const data= [
  {
    key: 1,
    name: 'Jack',
    email:'jack@gmail.com',
    address: 'Dhaka'
  },
  {
    key: 2,
    name: 'jon',
    email:'jon@gmail.com',
    address: 'Dhaka'
  }
];

const TableContainer = (props) => {
  const { columns, data, loading } = props;

  return <Table columns={columns} dataSource={data} loading={loading} />;
};

export default TableContainer;

标签： reactjsantd

解决方案

您可以根据以下条件有条件地呈现您的表格data.length。如果你有一个空数组，那么它不会显示表格。

const TableContainer = (props) => {
  const { columns, data, loading } = props;

   return (
    <>{data?.length > 0 && <Table columns={columns} dataSource={data}  loading={loading} />}</>
  );
};

推荐阅读