import { useState } from 'react'; import { Card, Table,Button } from 'antd'; export default function Home() { const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', defaultSortOrder: 'descend', sorter: (a, b) => a.age - b.age, }, { title: 'Address', dataIndex: 'address', }, ]; const data = [ {key:12,name:"张三1",age:19,address:"邯郸"}, {key:13,name:"张三2",age:12,address:"保定"}, {key:14,name:"张三3",age:44,address:"形态"}, {key:15,name:"张三4",age:9,address:"上海"}, {key:16,name:"张三5",age:23,address:"北京"}, {key:17,name:"张三5",age:23,address:"北京"}, {key:18,name:"张三5",age:23,address:"北京"}, {key:19,name:"张三5",age:23,address:"北京"}, {key:11,name:"张三5",age:23,address:"北京"}, {key:165,name:"张三5",age:23,address:"北京"}, {key:163,name:"张三5",age:23,address:"北京"}, ]; // for (let i = 0; i < 46; i++) { // data.push({ // key: i, // name: `Edward King ${i}`, // age: i+2, // address: `London, Park Lane no. ${i}`, // }); // } const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [loading, setLoading] = useState(false); const start = () => { setLoading(true); // ajax request after empty completing setTimeout(() => { setSelectedRowKeys([]); setLoading(false); }, 1000); }; const onSelectChange = (newSelectedRowKeys) => { console.log('selectedRowKeys changed: ', newSelectedRowKeys); setSelectedRowKeys(newSelectedRowKeys); }; const rowSelection = { selectedRowKeys, onChange: onSelectChange, }; const hasSelected = selectedRowKeys.length > 0; return ( <div style={{width:"100%",height:"100vh",backgroundColor:"#e5e5e5"}}> <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: "70%", margin:"0 auto", paddingTop:"30px" }} > <Button type="primary" size="large"> 添加 </Button> <Button type="primary" size="large"> 修改 </Button> <Button type="primary" size="large"> 删除 </Button> <Table rowSelection={rowSelection} columns={columns} dataSource={data} /> </Card> </div> ) }