React + Ant list列表 全选反选及分页设置
前言
因业务需要list的全选反选个别选择操作,还有分页,改造了一个list和card的样式。请直接看代码吧
图片展示
页面代码
代码如下(示例):
import { HeartFilled, HeartTwoTone } from '@ant-design/icons';
import { Button, Card, Checkbox, List } from 'antd';
import React, { useState } from 'react';
interface Data {
id: number;
name: string;
url: string;
}
const data = [
{ id: 1, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 2, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 3, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 4, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 5, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 6, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 7, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 8, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 9, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
{ id: 10, name: '名称', url: 'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' },
];
const ItemCard = ({ Item, handleChange }) => (
<Card
bordered={false}
hoverable
title={<Checkbox checked={Item.checked} key={Item.id} onChange={(e) => handleChange(e, Item.id)} />}
extra={
<Button type="link">
<HeartTwoTone twoToneColor="#BC498A" style={{ fontSize: '25px' }} />
<HeartFilled style={{ fontSize: '25px', color: '#BC498A' }} />
</Button>
}
actions={[<div>{Item.name}</div>]}
>
<div style={{ textAlign: 'center' }}>
<img alt="example" src={Item.url} style={{ width: 50 }} />
<h1>{Item.name}</h1>
</div>
</Card>
);
const Group = () => {
const [list, setList] = useState<Data[]>(data);
const [checkedAll, setCheckedAll] = useState<boolean>(false);
const handleCheckAll = (e) => {
setCheckedAll(e.target.checked);
if (e.target.checked) {
setList(list.map((item) => ({ ...item, checked: true })));
console.log('111', list);
} else {
setList(list.map((item) => ({ ...item, checked: false })));
}
};
const handleCheckItem = (e, Id) => {
const curList = list.map((item) => {
if (item.id === Id) {
return ({ ...item, checked: e.target.checked });
}
return ({ ...item });
});
if (curList.filter((item) => item.checked).length === list.length) {
setCheckedAll(true);
} else {
setCheckedAll(false);
}
setList(curList);
};
return (
<div >
<Checkbox checked={checkedAll} onChange={handleCheckAll}>全选</Checkbox>
<List
grid={{ gutter: 16, column: 4 }}
dataSource={list}
pagination={{
onChange: (page) => {
console.log(page);
},
pageSize: 5,
}}
renderItem={(item) => (
<List.Item>
<ItemCard Item={item} handleChange={handleCheckItem} />
</List.Item>
)}
/>,
</div>
);
};
export default Group;