使用antd组件写一段后台表格的前端代码

下面是一个简单的使用Antd组件的后台表格前端代码示例：

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

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const TableComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/users').then(res => {
      setData(res.data);
    });
  }, []);

  return (
    <Table
      columns={columns}
      dataSource={data}
      pagination={{ pageSize: 10 }}
      scroll={{ y: 500 }}
    />
  );
};

export default TableComponent;

在这个例子中，我们使用了Antd的`Table`组件来渲染表格。我们定义了一个`columns`数组，其中包含每一列的标题和数据索引。然后，我们使用`useState`来定义一个`data`状态，用于存储从后端API获取的数据。我们使用`useEffect`钩子来在组件挂载后获取数据，并将数据设置为`data`状态。最后，我们将`columns`和`data`传递给`Table`组件来渲染表格。我们还设置了分页和滚动条的参数。