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

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和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.lryc.cn/news/482112.html

相关文章:

  • 基于STM32设计的矿山环境监测系统(NBIOT)_262
  • 【初阶数据结构与算法】线性表之链表的分类以及双链表的定义与实现
  • 219页华为供应链管理:市场预测SOP计划、销售预测与存货管理精要
  • mac 安装指定的node和npm版本
  • 为什么分布式光伏规模是6MW为界点?
  • arm64架构的linux 配置vm_page_prot方式
  • vue3 + naive ui card header 和 title 冲突 bug
  • Ubuntu 22.04.5 LTS配置 bond
  • 100种算法【Python版】第58篇——滤波算法之卡尔曼滤波
  • 关于几种卷积
  • 51单片机教程(五)- LED灯闪烁
  • VUE3中Element table表头动态展示合计信息(不是表尾合计)
  • git重置的四种类型(Git Reset)
  • 【Java集合面试1】说说Java中的HashMap原理?
  • 万字长文解读机器学习——决策树
  • 内网环境,基于k8s docer 自动发包
  • 【HCIP园区网综合拓扑实验】配置步骤与详解(已施工完毕)
  • Qt 编写插件plugin,支持接口定义信号
  • Qt中 QWidget 和 QMainWindow 区别
  • Kafka集群中数据的存储是按照什么方式存储的?
  • 中断的硬件框架
  • 数据备份策略:企业防御的关键
  • Baget 私有化nuget
  • 前端函数的参数都有哪些?
  • 【CSS】什么是BFC?
  • HCIP小型园区网拓扑实验
  • GRR测量系统的重复性和再现性
  • 133.鸿蒙基础01
  • 科技查新小知识
  • docker安装portainer