列表组件引入
- 借用ListTable的css样式
直接在div盒子上添加对应属性
<div className='list_table'>ListList</div> 复制代码
列表传送门
- 复制对应代码
itemLayout="horizontal" loadMore={loadMore} dataSource={list} renderItem={item => ( <List.Item actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]} > <Skeleton avatar title={false} loading={item.loading} active> <List.Item.Meta avatar={<Avatar src={item.picture.large} />} title={<a href="https://ant.design">{item.name.last}</a>} description="Ant Design, a design language for background applications, is refined by Ant UED Team" /> <div>content</div> </Skeleton> </List.Item> )} /> </div> 复制代码
修改代码
- 使用useState
// 引入useState import React,{useState} from 'react' 将List转换就行其余删掉 const [list, setList] = useState([]) 复制代码
删除 fakeDataUrl 、count
删除List中的initLoading、loadMore、 avatar
- 最后代码
import React,{useState} from 'react' import { List,Skeleton } from 'antd'; export default function ListList() { const [list, setList] = useState([]) return ( <div className='list_table'> <List className="demo-loadmore-list" itemLayout="horizontal" dataSource={list} renderItem={item => ( <List.Item actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]} > <Skeleton title={true} loading={item.loading} active> <List.Item.Meta title={<a href="!#">标题</a>} description="副标题" /> <div>日期</div> </Skeleton> </List.Item> )} /> </div> ) } 复制代码
实现效果
使用useEffect发送请求
// 引入useEffect import React,{useState,useEffect} from 'react' // 引入api import { ArticleListApi } from '../request/api'; 复制代码
// 请求列表数据 useEffect(()=>{ ArticleListApi().then(res=>{ console.log(res.data.arr) if(res.errCode === 0) { let {arr,total,num,count} = res.data; setList(arr) } }) },[]) 复制代码
- 渲染数据
<Skeleton loading={false}> <List.Item.Meta title={<a href="!#">{item.title}</a>} description={item.subTitle} /> <div>{item.date}</div> </Skeleton> 复制代码
- 实现效果
- 将标题挤开部分
style={{ padding: '20px' }} 复制代码
- 设置分页
引入分页
import { List,Skeleton,Pagination } from 'antd'; 复制代码
使用API
<Pagination onChange={onChange} total={50} /> 复制代码
书写onChange事件
// 分页 const onChange = (pages) => { console.log(pages) } 复制代码
使用useState设置total、current、pageSize
const [total, setTotal] = useState(0) const [current, setCurrent] = useState(1) const [pageSize, setPageSize] = useState(10) 复制代码
在Pagination中可以直接使用total、current、pageSize
<Pagination onChange={onChange} total={50} total={total} current={current} pageSize={pageSize} /> 复制代码
请求更新total、current、pageSize
// 请求列表数据 useEffect(()=>{ ArticleListApi({ num: current, count: pageSize }).then(res=>{ console.log(res.data.arr) if(res.errCode === 0) { let {arr,total,num,count} = res.data; setList(arr); setTotal(total); setCurrent(num); setPageSize(count) } }) },[]) 复制代码
- 请求封装
// 请求封装 const getList = (num) => { ArticleListApi({ num: num, count: pageSize }).then(res=>{ console.log(res.data.arr) if(res.errCode === 0) { let {arr,total,num,count} = res.data; setList(arr); setTotal(total); setCurrent(num); setPageSize(count) } }) } 复制代码
- 书写点击事件
// 分页 const onChange = (pages) => { getList(pages); } 复制代码
将分页按钮书写到右边
style={{float: 'right',marginTop: '20px'}} 复制代码
日期域按钮
日期
// 引入moment import moment from 'moment' //规范时间 <div>{moment(item.date).format("YYYY-MM-DD hh:mm:ss")}</div> 复制代码
按钮
// 引入button import { ArticleListApi } from '../request/api'; 复制代码
actions={[ <Button type='primary' onClick={()=>console.log(item.id)}>编辑</Button>, <Button type='danger' onClick={()=>console.log(item.id)}>删除</Button> ]} 复制代码
