ant design table 请求数据 渲染 代码示例

以下是一个基本的 antd table 请求数据并渲染的代码示例：

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

const columns = [ // 表格列配置
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const ExampleTable = () => {
  const [data, setData] = useState([]); // 数据状态

  useEffect(() => { // 请求数据
    fetch('/api/data')
      .then(response => response.json())
      .then(result => setData(result));
  }, []);

  return (
    <Table columns={columns} dataSource={data} /> // 渲染表格
  );
};

export default ExampleTable;

其中，`columns` 是表格列配置，`data` 是请求到的数据，`useEffect` 用于在组件挂载时发送请求并更新数据状态，`Table` 组件用于渲染表格。如果接口返回的数据格式与 antd 的表格要求不同，可以使用 `render` 属性对数据进行处理。