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

移动端表格分页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.lryc.cn/news/238814.html

相关文章:

  • 全志R128芯片RTOS调试指南
  • 超级实用的程序员接单平台,看完少走几年弯路,强推第一个!
  • 前端字符串方法汇总
  • 12 分布式锁加入看门狗
  • 怎么判断list是否为null
  • 11.数据公式中使用2个 $$ a =b $$,是什么意思?
  • 设计模式-14-迭代器模式
  • 防雷接地+防雷工程施工综合方案
  • 排序算法--选择排序
  • 【Web】Ctfshow SSRF刷题记录1
  • 【算法挨揍日记】day30——300. 最长递增子序列、376. 摆动序列
  • ROS2对比ROS1的一些变化与优势(全新安装ROS2以及编译错误处理)《1》
  • 基于单片机PM2.5监测系统仿真设计
  • CRM系统中的联系人是什么?如何进行联系人管理?
  • uniapp:如何实现点击图片可以全屏展示预览
  • python运行hhsearch二进制命令的包装器类
  • Java 网络编程、e-mail、多线程编程
  • 为虚幻引擎开发者准备的Unity指南
  • Vue 2使用element ui 表格不显示
  • C++学习 --文件
  • java/Android:将字符串按数量分割
  • JVM 监控命令详解
  • TEE威胁评分与评级
  • -bash: ./deploy.sh: /bin/bash^M: bad interpreter: No such file or directory
  • 【文末送书】十大排序算法C++代码实现
  • vue-waterfall2 实现瀑布流,及总结的问题
  • grafana二次启动失败
  • C/C++杂谈-printf的可变参数机制
  • es基本语法 (kibana)
  • Tesco EDI需求分析