移动端表格分页uni-app

使用uni-app提供的uni-table表格

网址:https://uniapp.dcloud.net.cn/component/uniui/uni-table.html#介绍

xml 复制代码
<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>
javascript 复制代码
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.rows
				this.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()
			},
		}
  }
相关推荐
黑云压城After16 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
2501_9159090617 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
未来之窗软件服务18 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友19 小时前
什么是断言?
前端·后端·安全
FIN666820 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎49520 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。12420 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树20 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN666820 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER20 小时前
杂记 14
前端·笔记·学习·web