效果图
代码如下：
<template>
<view class="center">
<view class="wrap">
<view class="table">
<table class="table_self" >
<tr class="table_tr">
<td class="table_border" id="tabale_th">
<checkbox-group @change="checkboxChange">
<checkbox value="cb" :checked="isCheckAll" />
</checkbox-group>
</td>
<td class="table_border">通道号</td>
<td class="table_border">报警时间</td>
<td class="table_border">采集时间</td>
<td class="table_border">采集状态</td>
<td class="table_border">更新时间</td>
</tr>
<tr class="table_tr" v-for="(item,index) in list" :key="index">
<td class="table_border">
<checkbox-group @change="checkList(item)">
<checkbox value="cb" :checked="item.checked" />
</checkbox-group>
</td>
<td class="table_border">{
{
item.carNum}}</td>
<td class="table_border">{
{
item.bjtime}}</td>
<td class="table_border">{
{
item.cjtime}}</td>
<td class="table_border">{
{
item.status}}</td>
<td class="table_border">{
{
item.updatetime}}</td>
</tr>
</table>
</view>
<view class="table_page">
<Pagination
:pageNo="searchParams.pageNo"
:pageSize="searchParams.pageSize"
:total="total"
:continues="4"
@getPageNo="getPageNo"
/>
</view>
</view>
</view>
</template>
<script>
import Pagination from '@/components/pagination'
export default {
data() {
return {
searchParams:{
pageNo:1,
pageSize:10,
},
total:89,
list:[{
id:'1',
checked:false,
carNum:'1',
bjtime:'2023-12-15 13:11:13',
cjtime:'2023-12-15 13:10:13',
status:'正常',
updatetime:'2023-12-15 13:12:13',
},
{
id:'2',
checked:false,
carNum:'1',
bjtime:'2023-12-15 13:11:13',
cjtime:'2023-12-15 13:10:13',
status:'通讯中断',
updatetime:'2023-12-15 13:12:13',
},
],
isCheckAll:false,
checkedList:[],
}
},
components:{
Pagination
},
methods: {
//选中单个
checkList(val){
val.checked=!val.checked;
console.log(val);
let len=this.list.length;
if(val.checked){
this.checkedList.push(val.id)
}else{
for(let i=0;i<this.checkedList.length;i++){
if(val.id==this.checkedList[i]){
this.checkedList.splice(i,1)
}
}
}
if(this.checkedList.length==len){
this.isCheckAll=true;
}else{
this.isCheckAll=false;
}
console.log(this.checkedList);
},
//全选
checkboxChange(){
this.isCheckAll=!this.isCheckAll;
let arr=[];
if(this.isCheckAll){
for(let i=0;i<this.list.length;i++){
this.list[i].checked=true;
arr.push(this.list[i].id);
}
}else{
for(let i=0;i<this.list.length;i++){
this.list[i].checked=false;
arr=[];
}
}
this.checkedList=arr;
console.log(arr);
console.log(this.checkedList)
},
getPageNo(pageNo) {
this.searchParams.pageNo = pageNo;
//再次发请求
// this.getData();
},
}
}
</script>
<style lang='scss'>
.center{
display: flex;
margin-top:40upx;
.wrap{
width:calc(84% - 40upx);
margin-left:40upx;
height:auto;
margin:0 auto;
position:relative;
padding:40upx;
box-sizing: border-box;
background-color: #fff;
.table{
margin-top:40upx;
.table_border{
border:2upx solid #4E7CA0;
}
.table_tr{
/* width:100%; */
height:60upx;
border:2upx solid #4E7CA0;
}
.table_self{
width:100%;
text-align:center;
border:2upx solid #4E7CA0;
border-collapse:collapse;
}
.width_20{
width:20%;
}
}
.table_page{
display: flex;
justify-content: right;
margin-top:40upx;
}
}
}
</style>
分页组件pagination.vue
代码如下
<template>
<view>
<view class="pagination">
<!-- 上 -->
<button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
上一页
</button>
<button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo', 1)" :class="{ active: pageNo == 1 }">
1
</button>
<button v-if="startNumAndEndNum.start > 2">···</button>
<!-- 中间部分 -->
<button v-for="(page, index) in startNumAndEndNum.showArray" :key="index"
@click="$emit('getPageNo', page)" :class="{ active: pageNo == page }">
{
{
page }}
</button>
<!-- 下 -->
<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
<button v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo', totalPage)" :class="{active:pageNo==totalPage}">
{
{
totalPage }}
</button>
<button :disabled="pageNo == totalPage" @click="$emit('getPageNo', pageNo + 1)">
下一页
</button>
<button style="margin-left: 30px">共 {
{
total }} 条</button>
</view>
</view>
</template>
<script>
export default {
name: "Pagination",
props: ["pageNo", "pageSize", "total", "continues"],
computed: {
//总共多少页
totalPage() {
//向上取证
return Math.ceil(this.total / this.pageSize);
},
//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
startNumAndEndNum() {
const {
continues, pageNo, totalPage } = this;
//先定义两个变量存储起始数字与结束数字
let start = 0,
end = 0;
//连续页码数字5【就是至少五页】，如果出现不正常的现象【就是不够五页】
//不正常现象【总页数没有连续页码多】
if (continues > totalPage) {
start = 1;
end = totalPage;
let showArray = Array.from({
length: totalPage}, (v, i) => start + i)
return {
start, end, showArray};
} else {
//正常现象【连续页码5，但是你的总页数一定是大于5的】
//起始数字
start = pageNo - parseInt(continues / 2);
//结束数字
end = pageNo + parseInt(continues / 2);
//把出现不正常的现象【start数字出现0|负数】纠正
if (start < 1) {
start = 1;
end = continues;
}
//把出现不正常的现象[end数字大于总页码]纠正
if (end > totalPage) {
end = totalPage;
start = totalPage - continues + 1;
}
let showArray = Array.from({
length: end}, (v, i) => start + i)
for(let i=0;i<showArray.length;i++){
if(showArray[i]>end){
showArray.splice(i-showArray.length)//修改页码不正常
}
}
return {
start, end, showArray};
}
},
},
}
</script>
<style lang="scss" scoped>
.pagination {
text-align: center;
button {
margin: 0 5px;
background-color: #f4f4f5;
color: #606266;
outline: none;
border-radius: 2px;
padding: 0 4px;
vertical-align: top;
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
border: 0;
&[disabled] {
color: #c0c4cc;
cursor: not-allowed;
}
&.active {
cursor: not-allowed;
background-color: #409eff;
color: #fff;
}
}
}
.active{
background: skyblue;
}
</style>