移动端表格分页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.mzph.cn/news/149813.shtml

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

相关文章

Java的构造器

构造器 1.package com.msb2; 2. 3./** 4. * Auther: msb-zhaoss 5. */ 6.public class Person { 7. //构造器&#xff1a;没有任何参数的构造器我们叫做&#xff1a;空参构造器--》空构造器 8. public Person(){ 9. /*age 19; 10. name "lili"…

【Nacos】配置管理、微服务配置拉取、实现配置热更新、多环境配置

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 Nacos 一、nacos实现配置管理1.1 统一配置管…

Taro安装及使用

安装及使用 安装​ Taro 项目基于 node&#xff0c;请确保已具备较新的 node 环境&#xff08;>12.0.0&#xff09;&#xff0c;推荐使用 node 版本管理工具 nvm 来管理 node&#xff0c;这样不仅可以很方便地切换 node 版本&#xff0c;而且全局安装时候也不用加 sudo 了…

不必购买Mac,这款国产设计工具能轻松替代Sketch!

介绍 即时设计是新一代可以直接在浏览器中使用的设计工具&#xff0c;具有Sketch和实时协作功能。与本地Sketch相比&#xff0c;增加了实时协作功能&#xff0c;即时设计可以看作是在线Sketch&#xff0c;两个工具可以简单粗暴地总结为一个公式&#xff1a; 即时设计Sketch云…

Nginx - 本机读取服务器图像、视频

目录 一.引言 二.安装 Nginx 1.安装 By apt 2.安装 By 官网 三.配置 Nginx 1.Linux 机器配置 2.重启 Nginx 服务 3.本机查看机器文件 四.总结 一.引言 前面介绍了 GFP-GAN、PNG2GIF、GIF2PNG 等操作&#xff0c;我们生成的 video、gif、png 等形式的文件都存储在 lin…

Nginx(反向代理,负载均衡,动静分离)

反向代理 Nginx反向代理是一种将客户端请求转发给后端服务器的技术&#xff0c;即反向代理服务器。在这种架构中&#xff0c;客户端请求首先到达Nginx服务器&#xff0c;然后由Nginx服务器将请求转发给后端服务器&#xff0c;后端服务器响应请求&#xff0c;并将响应传递回Ngi…

【wp】2023第七届HECTF信息安全挑战赛 Web

伪装者 考点&#xff1a;http协议flask的session伪造ssrf读取文件 首先根据题目要求就行伪造HTTP 这里不多说&#xff0c;比较基础 然后下面得到是个登入 页面&#xff0c;我们输入zxk1ing 得到 说什么要白马王子 &#xff0c;一眼session伪造 看到ey开头感觉是jwt 输入看看 得…

通达信的ebk文件

我们在通达信软件中 调出 “自定义板块设置” 这个菜单&#xff0c;点击“导出”&#xff0c;会提示你存储 “自选股.EBK”&#xff0c;其实就是对自定义板块里的目录进行备份的一种方式&#xff0c; 当我们打开 这个文件&#xff0c;你会发现其实就是存储了 股票代码&#xff…

CRM系统定制开发价格

我们都知道&#xff0c;CRM系统对企业有着很大的帮助。但是市面上大多数CRM系统都是标准化的&#xff0c;无法满足那些产品线复杂&#xff0c;或者有着特殊需求的企业。这个时候&#xff0c;就需要对CRM系统进行二次开发。那么&#xff0c;CRM系统二次开发的价格是多少&#xf…

快手运营的必备的10个工具

一、引言 快手作为短视频领域的佼佼者&#xff0c;为众多创作者提供了广阔的舞台。要想在快手运营中取得成功&#xff0c;掌握一些必备的工具是必不可少的。本文将为您介绍快手运营的10个必备工具&#xff0c;帮助您提高工作效率&#xff0c;优化内容创作。 二、工具推荐 1. …

Linux(4):Linux文件与目录管理

目录与路径 相对路径在进行软件或软件安装时非常有用&#xff0c;更加方便。利用相对路径的写法必须要确认目前的路径才能正确的去到想要去的目录。 绝对路径的正确度要比相对路径好&#xff0c;因此&#xff0c;在写程序&#xff08;shell scripts&#xff09;来管理系统的条…

centos oracle11g开启归档模式

要在 CentOS 上停止 Oracle 11g 数据库&#xff0c;你可以按照以下步骤操作&#xff1a; 1.登录到操作系统 首先&#xff0c;使用具有足够权限的用户登录到 CentOS 操作系统。通常情况下&#xff0c;你需要以具有 oracle 用户权限的用户登录。 使用 SYSDBA 权限连接到数据库…

装备中国功勋企业——兰石重装,建设LTC全流程管理|基于得帆云低代码的CRM案例系列

兰石重型装备股份有限公司 兰石重型装备股份有限公司&#xff08;以下简称“兰石重装”&#xff09;成立于2001年&#xff0c;经营范围为炼油、化工、核电等能源领域所需的装备的设计、制造、安装、成套与服务&#xff1b;工程项目建设与服务&#xff1b;机械加工&#xff1b;检…

通过多线程的方式每次发送10条MQ消息

背景&#xff1a;传入一个List<person>,不知道list中有多少条数据。 import org.apache.rocketmq.client.producer.DefaultMQProducer; import org.apache.rocketmq.client.producer.Message; import org.apache.rocketmq.client.producer.SendResult;import java.util.A…

安全+Linux!IBM新一代大型机Z14全新发布

导读本周&#xff0c;以“架构 人机同行”为主题的IBM Systems创行者高峰论坛在北京召开&#xff0c;IBM全球及大中华区硬件系统部负责人&#xff0c;金融、医疗、制造等领域的企业、合作伙伴共与这一年度盛会&#xff0c;探讨认知时代下的基础架构技术趋势及IBM硬件系统业务的…

微积分在神经网络中的本质

calculus 在一个神经网络中我们通常将每一层的输出结果表示为&#xff1a; a [ l ] a^{[l]} a[l] 为了方便记录&#xff0c;将神经网络第一层记为&#xff1a; [ 1 ] [1] [1] 对应的计算记录为为&#xff1a; a [ l ] &#xff1a; 第 l 层 a [ j ] &#xff1a; 第 j 个神经…

树莓派通过网线连接电脑(校园网也能连接),实现SSH连接

前言 之前通过串口登入树莓派&#xff0c;太麻烦&#xff0c;通过网络登入树莓派&#xff0c;学校校园网又连接不了&#xff0c;想起来可以使用网线连接树莓派和电脑。 目录 树莓派通过网线连接电脑思路分析 树莓派通过网线连接电脑实现 1.硬件需求 2.打开Windows的网络 …

servlet乱码问题

问题&#xff1a;中文乱码 解决&#xff1a;加框的部分

python 自动化福音,30行代码手撸ddt模块

用 python 做过自动化的小伙伴&#xff0c;大多数都应该使用过 ddt 这个模块&#xff0c;不可否认 ddt 这个模块确实挺好用&#xff0c;可以自动根据用例数据&#xff0c;来生成测试用例&#xff0c;能够很方便的将测试数据和测试用例执行的逻辑进行分离。 接下来就带大家一起…

Ubuntu22.04 Apache2安装SSL证书 https

一、免费证书申请 https://help.aliyun.com/zh/ssl-certificate/user-guide/overview-of-free-certificates 得到 三、配置 执行以下命令&#xff0c;打开default-ssl.conf文件。 vim /etc/apache2/sites-available/default-ssl.conf 在default-ssl.conf配置文件中&#xff…