a标签跳转
将Link标签修改为a标签
添加href
跳转新窗口 target="_blank"
<a to="/" className='table_title' href={"http://codesohigh.com:8765/article/" + props.id} target="_blank">{props.title}</a> 复制代码
id的获取
先输出text，看打印内容是什么
代码显示
render: (text, record) => { console.log(text) return ( <Space size="middle"> <Button type='primary' >编辑</Button> <Button type='danger'>删除</Button> </Space> ) } 复制代码
- 操作台显示
使用点击事件获取id值（text.key就是我们需要的id）
<Button type='primary' onClick={()=>console.log(text.key)}>编辑</Button> <Button type='danger' onClick={()=>console.log(text.key)}>删除</Button> 复制代码
- 实现效果图（点击按钮输出id到控制台）
封装请求文章
将useEffect内部的代码全部剪切到新定义的getArticleList的函数内部。
// 提取请求的代码 const getArticleList = ()=> { ArticleListApi().then(res=>{ if(res.errCode === 0) { let newArr = JSON.parse(JSON.stringify(res.data.arr)) /* 1. 要给每个数组项加key，让key=id 2. 需要有一套标签结构，赋予一个属性 */ // 声明一个空数组 let myarr = [] newArr.map(item => { let obj = { key: item.id, date: moment(item.date).format("YYYY-MM-DD hh:mm:ss"), mytitle: <MyTitle id={item.id} title={item.title} subTitle={item.subTitle} /> } myarr.push(obj) }) setArr(myarr) } }) } // 请求文章列表 useEffect(() => { getArticleList(); }, []); 复制代码
分页函数
- 分页传送门
在Table标签中添加onChange事件
<Table columns={columns} showHeader = {false} dataSource={arr} onChange={pageChange} /> 复制代码
书写分页函数
// 分页的函数 const pageChange = (pagination) => { console.log(pagination) } 复制代码
点击换页标签时，操作台会输出以下内容
- 在Table标签中pagination
使用useState设置分页
//分页 const [pagination,setPagination] = useState({current:1,pageSize:1,total:0}) 复制代码
<Table columns={columns} showHeader = {false} dataSource={arr} onChange={pageChange} pagination={pagination} /> 复制代码
- 请求十条数据
为请求函数设置参数，传入current，pageSize
设置形参
// 提取请求的代码 const getArticleList = (current,pageSize)=> { ArticleListApi({ num:current, count:pageSize }).then(res=>{ if(res.errCode === 0) { let newArr = JSON.parse(JSON.stringify(res.data.arr)) /* 1. 要给每个数组项加key，让key=id 2. 需要有一套标签结构，赋予一个属性 */ // 声明一个空数组 let myarr = [] newArr.map(item => { let obj = { key: item.id, date: moment(item.date).format("YYYY-MM-DD hh:mm:ss"), mytitle: <MyTitle id={item.id} title={item.title} subTitle={item.subTitle} /> } myarr.push(obj) }) setArr(myarr) } }) } 复制代码
调用getArticleList() 传入实参
// 请求文章列表 useEffect(() => { getArticleList(pagination.current,pagination.pageSize); }, []); 复制代码
实现效果
换页按钮变为了一页，原因没有设置总条数。
找到分页的total属性
注意：这里视频突然发现Table有total属性。这里再度尝试输出res.data，看是否返回数据有total。
console.log(res.data) 复制代码
请求数据之后更改pagination
// 更改pagination let { num, count, total } = res.data; setPagination({ current: num, pageSize: count, total }) 复制代码
点击分页按钮后会返回一串数据
在分页函数中调用getArticleList封装请求函数（更新点击就调用getArticleList）
// 分页的函数 const pageChange = (arg) => getArticleList(arg.current, arg.pageSize); 复制代码
滚动样式
想要实现的效果
实际存在的问题，内容超出
- 给面包屑设置高度
<Breadcrumb style={{height: '30px',background:'red', lineHeight: '30px'}}> 复制代码
- 修改整体页面高度
在base.less中
.container_content{ height: calc(100vh - 210px); overflow: hidden; } 复制代码
App组件
function App() { return ( <Layout id='app'> <Header/> <div className='container'> <Aside /> <div className='container_box'> <Bread/> <div className="container_content"> <Outlet /> </div> </div> </div> <footer>Respect | Copyright © 2022 Author 你单排吧</footer> </Layout> ); } 复制代码
在ListTable.less中添加滚动
.list_table{ width: 100%; background: #fff; height: 100%; overflow-y: scroll; &::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; height: 100%; background: #fff; border-radius: 10px; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: #EDEDED; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #535353; } .table_title{ color: #333; &:hover{ color: #1890ff; } } } 复制代码
注意记得把那个面包屑背景颜色去掉！！！
- 最终实现效果
