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

news2024/11/14 14:36:11

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.coloradmin.cn/o/2239444.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp路由与页面跳转详解:API调用与Navigator组件实战

UniApp路由与页面跳转详解&#xff1a;API调用与Navigator组件实战 路由 uniapp页面路由为框架统一管理&#xff0c;开发者需要在page.json里面配置每个路由页面的路径及页面样式。 路由跳转 uniapp有两种页面路由跳转方式&#xff0c;调用API跳转和navigator组件跳转。 调…

35.Redis 7.0简介

2022 年 2 月初&#xff0c;Redis 7.0 迎来了首个候选发布&#xff08;RC&#xff09;版本。这款内存键值数据库迎来了“重大的性能优化”和其它功能改进&#xff0c;性能优化包括降低写入时复制内存的开销、提升内存效率&#xff0c;改进 fsync 来避免大量的磁盘写入和优化延迟…

MySQL技巧之跨服务器数据查询:基础篇-如何获取查询语句中的参数

MySQL技巧之跨服务器数据查询&#xff1a;基础篇-如何获取查询语句中的参数 上一篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MySQL数据库的连接名: MY_ODBC_MYSQL 以…

连续15年霸榜“双11”行业第一,九牧做对了什么?

文 | 螳螂观察&#xff08;TanglangFin&#xff09; 作者 | 余一 随着“双十一”的落幕&#xff0c;各类销售榜单再次成为热门话题。 天猫“双11”全周期589个品牌成交额破亿&#xff0c;其中苹果、海尔、美的、小米、九牧等45个品牌成交额突破10亿。 值得注意的是在绝大多…

【网页设计】HTML5 和 CSS3 提高

目标 能够说出 3~5 个 HTML5 新增布局和表单标签能够说出 CSS3 的新增特性有哪些 1. HTML5 的新特性 注&#xff1a;该部分所有内容可参考菜鸟教程菜鸟教程 - 学的不仅是技术&#xff0c;更是梦想&#xff01; (runoob.com) HTML5 的新增特性主要是针对于以前的不足&#xf…

Linux手动安装nginx

本次以安装nginx-1.12.2为例 1、首先说明一下,安装nginx之前需要安装如下素材: 2、开始安装 第一步,安装依赖yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel第二步,下载并安装nginx安装包(nginx官网:http://nginx.org/)# 下载 wget http://nginx…

基于springboot+vue实现的大型超市数据处理系统 (源码+L文+ppt)4-015

第4章 系统设计 本章主要讲述的是大型超市数据处理系统的设计开发结构&#xff0c;简单介绍了开发流程与数据库设计的原则以及数据表的关系结构图&#xff0c;并且详细的展示了数据表的内部结构信息与属性。 图4-2 大型超市数据处理系统总体结构图 4.4 数据表信息&#xff…

游戏引擎学习第七天

视频参考:https://www.bilibili.com/video/BV1QFmhYcE69 ERROR_DEVICE_NOT_CONNECTED 是一个错误代码&#xff0c;通常在调用 XInputGetState 或 XInputSetState 函数时返回&#xff0c;表示指定的设备未连接。通常会出现以下几种情况&#xff1a; 未连接控制器&#xff1a;如…

IEC60870-5-104 协议源码架构详细分析

IEC60870-5-104 协议源码架构 前言一、资源三、目录层级一二、目录层级二config/lib60870_config.hdependencies/READMEexamplesCMakeLists.txtcs101_master_balancedcs104_client_asyncmulti_client_servertls_clienttls_server说明 make这些文件的作用是否需要导入这些文件&a…

全面介绍软件安全测试分类,安全测试方法、安全防护技术、安全测试流程

一、软件系统设计开发运行安全 1、注重OpenSource组件安全检查和版本更新&#xff08;black duck&#xff09; 现在很多云、云服务器都是由开源的组件去搭成的&#xff0c;对于OpenSource组件应该去做一些安全检查和版本更新&#xff0c;尤其是版本管理&#xff0c;定期对在运…

Cent OS-7的Apache服务配置

WWW是什么&#xff1f; WWW&#xff08;World Wide Web&#xff0c;万维网&#xff09;是一个全球性的信息空间&#xff0c;其中的文档和其他资源通过URL标识&#xff0c;并通过HTTP或其他协议访问。万维网是互联网的一个重要组成部分&#xff0c;但它并不是互联网的全部。互联…

遗传算法与深度学习实战(23)——利用遗传算法优化深度学习模型

遗传算法与深度学习实战&#xff08;23&#xff09;——利用遗传算法优化深度学习模型 0. 前言1. 神经进化2. 使用遗传算法作为深度学习优化器小结系列链接 0. 前言 神经进化涵盖了所有用于改进深度学习的进化算法。更具体地说&#xff0c;神经进化用来定义应用于深度学习的特…

Kubernetes 核心组件调度器(Scheduler)

文章目录 一&#xff0c;调度约束1.Kubernetes的基本构建块和最小可调度单元pod创建过程&#xff08;工作机制&#xff0c;重点&#xff09;1.1list-watch 组件List-Watch 的优点List-Watch 的应用场景List-Watch 的挑战与优化 2.调度过程(重点)2.1调度过程&#xff1a;2.2Kube…

STM32WB55RG开发(3)----生成 BLE 程序连接手机APP

STM32WB55RG开发----3.生成 BLE 程序连接手机APP 概述硬件准备视频教学样品申请源码下载参考程序选择芯片型号配置时钟源配置时钟树RTC时钟配置RF wakeup时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙设置工程信息工程文件设置结果演示 概述 本项目旨…

[C++]内联函数和nullptr

> &#x1f343; 本系列为初阶C的内容&#xff0c;如果感兴趣&#xff0c;欢迎订阅&#x1f6a9; > &#x1f38a;个人主页:[小编的个人主页])小编的个人主页 > &#x1f380; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 > ✌️ &#x1f91e; &#x1…

微软OmniParser:一切皆文档,OCR驱动智能操作

前沿科技速递&#x1f680; 微软推出的OmniParser是一种创新的框架&#xff0c;旨在将手机和电脑屏幕视为文档&#xff0c;通过OCR技术与多模态大模型实现对用户界面的深度理解和操作。OmniParser能够高效识别和提取界面中的文本信息、位置和语义&#xff0c;助力自动化操作。 …

使用 Web Search 插件扩展 GitHub Copilot 问答

GitHub Copilot 是一个由 GitHub 和 OpenAI 合作开发的人工智能代码提示工具。它可以根据上下文提示代码&#xff0c;还可以回答各种技术相关的问题。但是 Copilot 本身不能回答非技术类型的问题。为了扩展 Copilot 的功能&#xff0c;微软发布了一个名为 Web Search 的插件&am…

Rust语言在系统编程中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 Rust语言在系统编程中的应用 Rust语言在系统编程中的应用 Rust语言在系统编程中的应用 引言 Rust 概述 定义与原理 发展历程 Ru…

vue+vite前端项目ci过程中遇到的问题

将项目进行ci流水线构建时&#xff0c;遇到了npm run build 构建完成后命令行不会终止的问题&#xff0c;导致了无法进行下一个步骤。如下图&#xff1a; 排查了好久找到事vite.config.js的配置出了问题&#xff0c;如图所示&#xff0c;将build下的watch改为false即可解决问…

Python 获取PDF的各种页面信息(页数、页面尺寸、旋转角度、页面方向等)

目录 安装所需库 Python获取PDF页数 Python获取PDF页面尺寸 Python获取PDF页面旋转角度 Python获取PDF页面方向 Python获取PDF页面标签 Python获取PDF页面边框信息 了解PDF页面信息对于有效处理、编辑和管理PDF文件至关重要。PDF文件通常包含多个页面&#xff0c;每个页…