uni-app表格带分页,后端处理过每页显示多少条

uni-app表格带分页,后端处理过每页可以显示多少条,一句设置好了每页显示的数据量,不需要钱的在进行操作,在进行对数据的截取

<th-table :column="column" :listData="data" :checkSort="checkSort" :st="st"
									:sr="sr" :tdClick="tdClick" height="0.5" :stripe="true" :border="true"
									:loading="false">
									<!-- 具名作用域插槽 #后面写column里slot的值 -->
									<template v-slot:b="Props">
										<!-- 子组件传递的参数 整个item  -->
										<span style="color: red;">{{ Props.item.b }}</span>
									</template>
									<template v-slot:c="Props">
										<span style="color: green;" @click="log(Props.item)">{{ Props.item.c }}</span>
									</template>
									<template v-slot:a="Props">
										<div style="color: pink;">{{ Props.item.a }}</div>
										<div>{{ Props.item.e }}</div>
									</template>
								</th-table>
<!-- 分页按钮 -->
						<view class="pagination">
							<button @click="prevPage" :disabled="pageNo === 1">上一页</button>
							<view class="pagina_q">
								<view>
									页码 {{ pageNo }}/{{ totalPages }}
								</view>
							</view>
							<button @click="nextPage" :disabled="pageNo === totalPages">下一页</button>
						</view>

script

const column = ref([
		{
			title: '时间',
			isSort: false,
			isFixed: false,
			key: 'dataTime'
		},
		{
			title: '电费',
			isSort: true,
			isFixed: false,
			key: 'powerPrice'
		}
	]);

//后端返回的数据必须匹配上title和key

const data = ref([]);   //渲染的数据内容

// 表身数据
const data = ref([]);
// 排序字段
const st = ref('b');
// 排序 1降序 -1升序
const sr = ref(-1);
// 切换排序事件
const checkSort = (name: string, type: number) => {
	st.value = name;
	sr.value = type;
};
// 分页相关
const pageNo = ref(1);
const pageyem = ref(5);

// 计算总页数
const totalPages = ref(1); // 初始化为1,避免未定义

// 分页操作
//上一页
const nextPage = () => {
	if (pageNo.value < totalPages.value) {
		pageNo.value += 1;
		fetchTableData();
	}
};
//下一页
const prevPage = () => {
	if (pageNo.value > 1) {
		pageNo.value -= 1;
		fetchTableData();
	}
};

const xuanrshu=ref();
const fetchTableData = () => {
	
		//分页数据内容
data.value = response.data;
		
	}).catch(error => {
		console.error("获取表数据失败:", error);
	});
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值