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

移动端表格分页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.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()
			},
		}
  }

在这里插入图片描述


http://www.kler.cn/a/133522.html

相关文章:

  • C/C++语言基础--C++模板与元编程系列六,C++元编程相关库的讲解与使用
  • 网络基础Linux
  • Linux—进程学习-02
  • Python——NumPy库的简单用法,超级详细教程使用
  • JavaScript 观察者设计模式
  • redis7.x源码分析:(1) sds动态字符串
  • 本地开发环境和服务器传输数据的几种方法
  • python自动化第一篇—— 带图文的execl的自动化合并
  • flink中配置Rockdb的重要配置项
  • 跟李沐学AI-深度学习课程05线性代数
  • react中设置activeClassName的笔记
  • 4.6每日一题(多元函数的隐函数求导)
  • 简单的用Python实现一下,采集某牙视频,多个视频翻页下载
  • 图像分类(五) 全面解读复现ResNet
  • idea启动tomcat报错404
  • 基于未来搜索算法优化概率神经网络PNN的分类预测 - 附代码
  • 2311rust,到60版本更新
  • 资深测试总结,现在软件测试有未来吗?“你“的底气在哪里?
  • mysql表字段数据类型对应java类型
  • 矩阵的QR分解
  • 向pycdc项目提的一个pr
  • 使用Qt实现多人聊天工作室
  • 聚观早报 |联想集团Q2财季业绩;小鹏汽车Q3营收
  • uniapp自定义组件
  • 线性方程组
  • Django部署时静态文件配置的坑