uni-app中表格分页

paradoxaaa_2025-11-13 12:21

样式：

代码实现：

template

复制代码

<uni-table ref="table" border stripe emptyText="暂无更多数据">
	<uni-tr>
		<uni-th width="150" align="center">库位名称</uni-th>
		<uni-th width="150" align="center">库位编码</uni-th>
	</uni-tr>
	<uni-tr v-for="(item, index) in list" :key="index" @row-click="handleRowClick(item, $event)">
		<uni-td align="center">{{ item.locationName }}</uni-td>
        <uni-td align="center">{{ item.locationCode }}</uni-td>
	</uni-tr>
</uni-table>
	<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
:current="pageCurrent" :total="total" @change="change" /></view>

script

复制代码

data() {
			return {
				list: [],
				selectedIndexs: [],
                pageCurrent: 1,       // 当前页码（从1开始）
                pageSize: 10,         // 每页条数
                total: 0,             // 总条数（用于分页控件）
				loading: false,
			}
		},
// 分页触发
			change(e) {
				// this.$refs.table.clearSelection()
				// this.selectedIndexs.length = 0
				this.handleLocationCode(e.current)
			},
	
			handleLocationCode(pageIndex) {
				let data = {
					UserName: this.userInfo.UserName,
					Type: "1",
					PageIndex: pageIndex ? pageIndex : 1,
					PageSize: 10,
					MenuCode: 'UnitLoadInTask'
				};
				console.log('获取起点', data)
				GetPlainLocations(data)
					.then(res => {
						console.log('获取起点提交成功', res.data)
						
				this.list = res.data.data
			console.log(this.list)
      // ✅ 从任意一条记录中取总条数（因为每条都有 TotalNum）
     // 如果 data 为空，则 total = 0
	this.total = res.data.data.length > 0 ? res.data.data[0].TotalNum : 0;
	// 同步当前页码
	this.pageCurrent = pageIndex;
	
					})
					.catch(err => {
						console.error('请求失败：', err);
						this.list = [];
						this.total = 0;
					});

			},