当前位置: 首页 > article >正文

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);
	});
};


http://www.kler.cn/a/392466.html

相关文章:

  • 01-Ajax入门与axios使用、URL知识
  • Matlab: 生成对抗网络,使用Datastore结构输入mat格式数据
  • 【Java SE】接口类型
  • [CKS] K8S ServiceAccount Set Up
  • 黄色校正电容102j100
  • 中文书籍对《人月神话》的引用(161-210本):微软的秘密
  • 深入理解接口测试:实用指南与最佳实践5.0(一)
  • Scala的List习题
  • 鸿蒙next版开发:相机开发-录像(ArkTS)
  • 算法训练(leetcode)二刷第二十三天 | 455. 分发饼干、*376. 摆动序列、53. 最大子数组和
  • 机器学习 笔记
  • 在 Ubuntu 上安装 `.deb` 软件包有几种方法
  • 【数据治理】你知道如何做静态脱敏吗?
  • TTL器件和CMOS器件的逻辑电平
  • 【动态规划】打家劫舍类问题
  • wordpress实用功能A5资源网同款 隐藏下载框 支付框 需要登录才能查看隐藏的内容
  • 系统架构设计师论文:论软件维护方法及其应用
  • git同步fork和原始仓库
  • 【C#设计模式(5)——原型模式(Prototype Pattern)】
  • ubuntu24.04安装matlab失败
  • PDF 转 Word——10个实用优质工具大揭秘!
  • 大数据学习13之Scala基础语法(重点)
  • Redis做分布式锁
  • day12:版本控制器
  • 检测敏感词功能
  • CelebV-Text——从文本生成人脸视频的数据集