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;