uniapp实现自定义table表格选中及封装分页pagination组件

效果图

代码如下：

<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>