react---antd design--table操作

People.jsx

import React, { useState, useEffect } from "react";
import { Table, Button } from "antd";
import { loadDMList } from "../api/iqiyi";

const columns = [
  {
    title: "序号",
    align: "center",
    width: 80,
    render: (text, record, index) => {
      console.log(text);
      console.log(record);
      console.log(index);
      return <span>{index + 1}</span>;
    },
  },
  {
    title: "名字",
    dataIndex: "name",
    key: "name",
    width: 100,
  },
  {
    title: "图片",
    dataIndex: "imageUrl",
    width: 100,
    render: (text, record) => {
      return (
        <img
          src={record.imageUrl}
          alt={record.name}
          style={{
            width: "80px;max-height: 80px",
            display: "block",
            margin: "0 auto",
          }}
        />
      );
    },
  },
  {
    title: "简介",
    dataIndex: "description",
  },
];

function People() {
  const [isLoading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [dataSource, setDS] = useState([]);
  useEffect(() => {
    loadDMList(page).then((res) => {
      setDS(res.data.data.list);
    });
  }, [page]);
  return (
    <div>
      <Button type="primary" onClick={() => setLoading(!isLoading)}>
        加载
      </Button>
      <Table
        bordered={true}
        loading={isLoading}
        dataSource={dataSource}
        columns={columns}
        pagination={{
          defaultCurrent: 1,
          total: 160,
          defaultPageSize: 16,
          onChange: (p) => {
            setPage(p);
          },
        }}
      />
    </div>
  );
}

export default People;