移动端表格分页uni-app

使用uni-app提供的uni-table表格
网址:https://uniapp.dcloud.net.cn/component/uniui/uni-table.html#%E4%BB%8B%E7%BB%8D

<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"@selection-change="selectionChange"><uni-tr><uni-th width="100" align="center">资产名称</uni-th><uni-th width="90" align="center">资产类别</uni-th><uni-th width="80" align="center">原使用部门</uni-th><uni-th width="50" align="center">操作</uni-th></uni-tr><uni-tr v-for="(item, index) in shenpilist" :key="index" :label="item.name" :name="item.name"><uni-td align="center">{{ item.assetName }}</uni-td><uni-td align="center">{{ item.categoryName }}</uni-td><uni-td align="center">{{ item.deptName }}</uni-td><uni-td align="center"><button class="uni-button" size="mini" type="primary" @click="onModalState(item)">详情</button></uni-td></uni-tr></uni-table>
<view class="uni-pagination-box"><uni-pagination show-icon  :current="queryParams.pageNum":total="total" @change="change" /></view>
import {getAssets} from '@/api/subpkg/index.js'
export default {data() {return {// 列表数据shenpilist: [],// 参数列表queryParams: {pageNum: 1,pageSize: 10,category: undefined,assetCode: '',assetName: '',},total: null,//总数据}},methods:{async getAssets() {const data = {isForceAllocate: this.value.indexOf('是否强制调拨') !== -1 ? 1 : 0,query: this.queryParams}const res = await getAssets(data)uni.hideLoading()this.shenpilist = res.rowsthis.total = res.total; console.log(this.total);},// 分页触发change(e) {console.log(e.current);this.queryParams.pageNum = e.current;uni.showLoading({title: '数据加载中',mask: true,});//分页切换之后,在发一次请求,使数据更新this.getAssets()},}}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/198765.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分享职业技术培训类型

职业技术培训类型包括&#xff1a;Python技术应用、人工智能应机器学习、大数据分析、机器学习。 一、“Python技术应用工程师” “Python技术应用工程师”职业技术认证是由工业和信息化部教育与考试中心推出一套专业化、科学化、系统化的人才考核标准&#xff0c;涉及在互…

剪辑视频怎么把说话声音转成文字?

短视频已然成为了一种生活潮流&#xff0c;我们每天都在浏览各种短视频&#xff0c;或者用视频的形式记录生活&#xff0c;在制作视频的时候&#xff0c;字幕是一个很大的问题&#xff0c;给视频添加字幕可以更直观、更方便浏览。手动添加太费时间&#xff0c;下面就给大家分享…

设计模式(5)-使用设计模式实现简易版springIoc

自定义简易版springIoc 1 spring使用回顾 自定义spring框架前&#xff0c;先回顾一下spring框架的使用&#xff0c;从而分析spring的核心&#xff0c;并对核心功能进行模拟。 数据访问层。定义UserDao接口及其子实现类 public interface UserDao {public void add(); }public…

【以图会意】操作系统的加载流程

声明&#xff1a;本图为博主方便自己记忆理解&#xff0c;诸多疏漏望请博友理性观看&#xff01;如有错误不足恳请指正。 首先&#xff0c;操作系统是一段程序&#xff0c;他保存在ROM中&#xff0c;在开机时&#xff0c;CPU被激活&#xff0c;首先将IR置为BIOS&#xff08;Bas…

15.ORACLE11g的归档方式和日志文件的相关操作

ORACLE11g的归档方式和日志文件的相关操作 一、什么是日志文件1、在线日志文件2、归档日志文件 二、Oracle 11g 归档方式&#xff1a;1、归档方式状态2、归档日志方式下数据库的工作原理3、配置归档日志方式3.1 开启归档模式3.2 日志文件相关操作&#xff1a; 4、oracle11g联机…

【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV4)模型算法详解

【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV4)模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV4)模型算法详解前言GoogLeNet(InceptionV4)讲解Stem结构Inception-A结构Inception- B结构Inception-C结构redution-A结构re…

2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-A卷

2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-A卷 2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-A卷A模块基础设施设置/安全加固&#xff08;200分&#xff09;A-1&#xff1a;登录安全加固&#xff08;Windows, Linux&#xff09;A-2&#…

大力说企微入门系列第二课:搭建体系

对于大部分人来说&#xff0c;学习有三动&#xff1a; 学习之前非常激动&#xff1b; 学习时候非常感动&#xff1b;学习之后是一动不动&#xff1b; 不知道大家看了上一课的《大力说企微入门系列第一课&#xff1a;企业微信的注册验证和认证》之后&#xff0c;是一动不动还是…

java基础练习缺少项目?看这篇文章就够了(下)!

公众号&#xff1a;全干开发 。 专注分享简洁但高质量的动图技术文章&#xff01; 回顾 在上节内容中&#xff0c;我们实现了用户开户的功能createAccount public void start(){System.out.println("欢迎您进入到了ATM系统");System.out.println("1、用户登录&…

基于JavaWeb的智慧停车管理系统设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。你想解决的问题&#xff0c;今天给大家介绍…

2024年测试工程师必看系列之fiddler设置手机端抓包全套教程

fiddler设置手机端抓包 安卓手机抓包 第一步&#xff1a;配置电脑和安卓的相关设置 1、手机和fiddler位于同一个局域网内&#xff1b;首先从fiddler处获取到ip地址和端口号&#xff1a; &#xff0c;点击online&#xff0c;最后一行就是ip地址 2、路径&#xff1a;Tools》Op…

(动手学习深度学习)第13章 计算机视觉---微调

文章目录 微调总结 微调代码实现 微调 总结 微调通过使用在大数据上的恶道的预训练好的模型来初始化模型权重来完成提升精度。预训练模型质量很重要微调通常速度更快、精确度更高 微调代码实现 导入相关库 %matplotlib inline import os import torch import torchvision f…

Linux网络——HTTP

目录 一.应用层 二.认识URL 1.域名 2.urlencode和urldecode 三.HTTP协议格式 1.请求格式http 2.响应格式 四.HTTP响应状态码 五.HTTP常见Header 六.简单的HTTP服务器 七.HTTP的方法 1.GET方法 2.POST方法 一.应用层 我们程序员写的一个个解决我们实际问题, 满足…

深入分析高性能互连点对点通信开销

今天分享最近阅读的一篇文章&#xff1a;“Breaking Band&#xff0c;A Breakdown of High-Performance Communication”&#xff0c;这篇文章发表在ICPP 2019会议。由加州大学欧文分校和ARM公司合作完成。从题目中可以看到&#xff0c;这篇文章是一篇评测型的文章&#xff0c;…

JDY蓝牙注意事项

波特率设置&#xff1a;9600&#xff0c;不接受115200&#xff0c;或者38400. 不同于WiFi测试&#xff0c;jdy蓝牙不接受AT"指令&#xff0c;可以使用“ATVERSION"指令测试 安信可公司的那个蓝牙指令在这里没有用&#xff0c;不知道是不是生产的公司不一样

网络协议入门 笔记一

一、服务器和客户端及java的概念 JVM (Java Virtual Machine) : Java虚拟机&#xff0c;Java的跨平台:一次编译&#xff0c;到处运行&#xff0c;编译生成跟平台无关的字节码文件 (class文件)&#xff0c;由对应平台的JVM解析字节码为机器指令 (010101)。 如下图所示&#xff0…

Java入门篇 之 抽象类接口

本篇碎碎念&#xff1a;个人认为压力是一种前进的动力&#xff0c;但是不要有太多压力&#xff0c;不然会使心情烦躁&#xff0c;会控制不住自己的情绪&#xff0c;会在一个临界值爆发&#xff0c;一旦爆发&#xff0c;将迟迟不能消散 今日份励志文案: 努力的背后必有加倍的赏赐…

Word中NoteExpress不显示的问题

首先确认我们以及安装了word插件 我们打开word却没有。此时我们打开&#xff1a;文件->选项->加载项 我们发现被禁用了 选择【禁用项目】&#xff08;如果没有&#xff0c;试一试【缓慢且禁用的加载项】&#xff09;&#xff0c;点击转到 选择启用 如果没有禁用且没有出…

海康威视综合安防管理平台任意文件上传

系统介绍 HIKVISION iSecure Center综合安防管理平台是一套“集成化”、“智能化”的平台&#xff0c;通过接入视频监控、一卡通、停车场、报警检测等系统的设备&#xff0c;获取边缘节点数据&#xff0c;实现安防信息化集成与联动&#xff0c;公众号&#xff1a;web安全工具库…

使用centos搭建内网的yum源

1.安装httpd服务 2.启动服务&#xff0c;设置开机自启 #启动服务 systemctl start httpd # 设置开机自动启动 systemctl enable httpd systemctl status httpd3.新建一个目录&#xff0c;将rpm文件放到该目录下 4.将/etc/httpd/conf/httpd.conf文件中的DocumentRoot "…