cv大法
直接复制粘贴搬运 OvO
一、html、js 代码
import React, {
useState} from 'react'
const Safeguard = () => {
const [pageNumber, setPageNumber] = useState(1)
const [pageSize, setPageSize] = useState(10)
// （1）造数据，维护页数和每页个数即可
let tableList = []
for (let j = 0; j < 13; j++) {
let arr =[]
for (let i = 0; i < pageSize; i++) {
arr.push({
key:i,
a: `${
j+1}xxxxxx`,
b: `xxxxxx`,
c: `xxxx/xxxx`,
d: `xxxx/xxxx`,
e: `xxxx/xxxx`,
f: `xxxxxx`,
g: `xxxxxx`
});
};
tableList.push(arr)
}
console.log('tableList', tableList)
const list = tableList[pageNumber - 1]
console.log('list', list)
// （2）页码点击
const pageClick = (index) => {
if (pageNumber - 1 == index) return
setPageNumber(index + 1)
}
// （3）跳转到某一页
const inputBlur = (e) => {
e.persist()
const val = e.target.value
if (val > tableList.length) {
setPageNumber(tableList.length)
return
}
if (val <= 1) {
setPageNumber(1)
return
}
setPageNumber(val)
}
// (4) dom元素
return (
<>
<div className='safeguard'>
<div className='title'>维护记录</div>
{
/* 表格 */}
<div className='tables'>
<table className="mytable">
<thead>
<tr>
<th>组件名称</th>
<th>组件描述</th>
<th>需求提出人/所属团队</th>
<th>设计负责人/所属团队</th>
<th>开发负责人/所属团队</th>
<th>上线时间</th>
<th>所属状态</th>
</tr>
</thead>
<tbody>
{
list.map((item, index) => {
return (
<tr key={
item.key} style={
{
'background': index % 2 == 0 ? '#FFFFFF' : '#F6F9FF',}}>
<td>{
item.a}</td>
<td>{
item.b}</td>
<td>{
item.c}</td>
<td>{
item.d}</td>
<td>{
item.e}</td>
<td>{
item.f}</td>
<td>{
item.g}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
{
/* 分页 */}
<div className="pagination">
<span className="lastPage" style={
{
'width': '28px'}}><</span>
{
tableList.map((item, index) => {
return (
<span
key={
index}
style={
{
'width': '28px',
'background': index == pageNumber - 1 ? '#DCE5F7' : '#FFFFFF',
'border': index == pageNumber - 1 ? '1px solid #5182E4' : null,
'color': index == pageNumber - 1 ? '#5182E4' : '#333333',
'display': Math.abs(pageNumber-index) >= 5 && tableList.length > 9 && index != 0 && index != 1 && index != tableList.length-2 && index != tableList.length - 1 ? 'none' : null,
} }
onClick={
() => {
pageClick(index)}}
>{
Math.abs(pageNumber-index) >= 5 && tableList.length > 9 && index != 0 && (index == 1 || index == tableList.length-2) && index != tableList.length - 1 ? '...' : index + 1}</span>
)
})
}
<span className="next" style={
{
'width': '28px'}}>></span>
<span className="page_size">10条/页</span>
<span>跳至</span>
<input type="text" className="jump" onBlur={
inputBlur}/>
<span>页</span>
</div>
</div>
</>
)
}
export default Safeguard
分页逻辑说明：
（1）页码下标与当前页码数相差5，隐藏标签。==>且表格数据的数组的长度大于9；且页码下标不为0、不为1；且页码下标不为倒数第二个和倒数第一个。
（2）当条件（1）满足时，页码下标为1或页码下标为倒数第二个时，标签内容渲染成 ...，其余的渲染成页面数。
二、css
.safeguard {
padding: 0 18px 99px 20px;
.title {
font-family: PingFangSC-Semibold;
font-size: 24px;
color: #222222;
font-weight: 600;
height: 70px;
width: 100%;
line-height: 73px;
text-align: left;
}
.tables {
width: 100%;
.mytable {
width: 100%;
border-spacing: 0;
border: 1px solid #E2E2E2;
border-radius: 12px 12px 0 0;
text-align: center;
margin-bottom: 0;
display: table;
}
tr {
border: none;
}
td, th{
height: 60px;
letter-spacing: 0;
font-weight: 400;
border: none;
}
td {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #707070;
}
th {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
background-color: #F2F6FF;
}
}
.pagination {
float: right;
margin-top: 22px;
text-align: right;
span {
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px;
font-family: HelveticaNeue;
color: #333333;
font-weight: 400;
display: inline-block;
}
.page_size {
width: 82px;
background: #FFFFFF;
border: 1px solid #E5E5E5;
border-radius: 2px;
margin: 0 8px 0 12px;
}
.jump {
display: inline-block;
background: #FFFFFF;
border: 1px solid #E5E5E5;
border-radius: 2px;
margin: 0 8px;
width: 48px;
text-align: center;
font-size: 14px;
}
}
}