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

embedded/2024/11/15 3:42:07/

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和keyconst 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.ppmy.cn/embedded/137665.html

相关文章

spring gateway 动态路由

##yml配置 spring:application:name: public-gateway # cloud: # gateway: # routes: # - id: mybatis-plus-test # 路由的唯一标识 # uri: http://192.168.3.188:9898 # 目标服务的地址 # predicates: # - Path/test/** # 匹配…

假设检验——基于Python实现

第 7 章——假设检验 7.1 假设检验的原理 7.2 总体均值的检验 【例7-3】——一个 总体均值的检验——大样本 【代码框7-1】——一个 总体均值的检验——大样本 # 一个总体均值的检验(大样本) import pandas as pd from statsmodels.stats.weightstats import ztest exa…

LuaJIT源码分析(六)语法分析

LuaJIT源码分析&#xff08;六&#xff09;语法分析 lua虚拟机在编译lua脚本时&#xff0c;在对源代码进行词法分析之后&#xff0c;还需要进行语法分析&#xff0c;把源代码翻译成字节码。lua 5.1完整的语法描述如下&#xff1a; LuaJIT采用的是递归下降的解析方式&#xff0c…

前端呈现效果:鱼眼相机城市环境图像分割

鱼眼相机城市环境图像分割系统源码&#xff06;数据集分享 [yolov8-seg-SPDConv&#xff06;yolov8-seg-vanillanet等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI G…

爬虫补环境案例---问财网(rpc,jsdom,代理,selenium)

目录 一.环境检测 1. 什么是环境检测 2.案例讲解 二 .吐环境脚本 1. 简介 2. 基础使用方法 3.数据返回 4. 完整代理使用 5. 代理封装 6. 封装所有使用方法 jsdom补环境 1. 环境安装 2. 基本使用 3. 添加参数形式 Selenium补环境 1. 简介 2.实战案例 1. 逆向目…

C哈的刷题计划之输出数字螺旋矩阵(1)

1、盲听C哈说 都说数据结构与算法是编程的核心&#xff0c;它们两个是内功与心法&#x1f600;&#xff0c;其它编程工具只是招式&#xff0c;学会了内功与心法&#xff0c;学习新事物&#xff08;这里特指层出不穷的IT技术&#xff09;就没有那么难了&#xff0c;实际上&#…

【面试全纪实 | Nginx 04】请回答,你真的精通Nginx吗?

&#x1f5fa;️博客地图 &#x1f4cd;1、location的作用是什么&#xff1f; &#x1f4cd;2、你知道漏桶流算法和令牌桶算法吗&#xff1f; &#x1f4cd;3、Nginx限流怎么做的&#xff1f; &#x1f4cd;4、为什么要做动静分离&#xff1f; &#x1f4cd;5、Nginx怎么做…

thinkphp如何查出值是null的布尔类型的值

exp 是用原生表达式查询的意思 $resDb::table(tbcardlist)->where(qc_hr_wac_hadsend,exp,is null or qc_hr_wac_hadsend0)->order(ID,asc)->find();查询值是null的字段的值时&#xff0c;要写 name is null 写 name null 是查不出正确的数据的 要写 name is null …