reactjs 动态打印antd表中的列

qxgroojn 于 2023-01-25 发布在 React

关注(0)|答案(1)|浏览(249)

我有一个数组包含了

let data =[{name:'sweetha',address'12b',age:23},
{name:'neema',address'5b',age:19},
{name:'metu',address'rt4',age:29},]

。我想把列打印到antd表中。所有的时间记录都可能改变。所以我想根据API的值动态打印数据。这怎么可能呢？

let columns1 = this.state.data && Object.keys(this.state.data[0])?.map((key) => (
            <span >{columns1.push({
                title: key, 
                dataIndex: key,
                //defaultSortOrder: 'descend',
                sorter: true
            })}
            </span>))

我试着这样做。但这对我没有帮助

reactjs

来源：https://stackoverflow.com/questions/75209723/print-columns-dynamically-in-antd-table

1条答案

按热度按时间

ukxgm1gy1#

通过在title、dataIndex和key中返回API响应键，您可以创建自己的列，然后将其传递给您的antd Table columns属性。例如：

const Index = () => {
  const [data, setData] = useState<Array<any>>([]);

  const fetchData = async () => {
    const data = await fetch(
      "https://jsonplaceholder.typicode.com/todos?_limit=10"
    );
    const json = await data.json();

    setData(json);
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (!(data.length > 0)) return null;

  const columns = Object.keys(data[0]).map((key) => {
    return {
      title: key,
      dataIndex: key,
      key: key,
    };
  });

  return (
    <div>
      <Table dataSource={data} columns={columns} />
    </div>
  );
};

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 动态打印antd表中的列

1条答案

相关问题

热门标签

最新问答