Bug:el-pagination设置current-page渲染失败

1 篇文章 0 订阅


项目场景:

Vue项目,使用Element-UI组件,加载表格,使用pagination分页组件对表格进行分页。



问题描述:

点击除了第1页以外的其他页码,表格内容刷新,但是分页组件current-page没有渲染,还是第1页处于被选中状态。


原因分析:

用调试工具发现,分页时current-page 有刷新,但是显示的还是默认第1页。网上分析:pagination组件的total更新,会导致page重新计算而重置(page默认值是1)。测试发现,分页的时候,不更新totalpagination组件没有问题。



解决方案:

既然是total更新导致的问题,可以在total更新之前暂存page的值;更新后,将刚才备份的值,重新赋值给page

后面发现网上又有另外一种解决方案(v-if):

<template>
	<div>
		<!-- 表格 -->
		<div class="table-box">
			<table>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
				</tr>
				<tr v-for="(item, index) in list" :key="index">
					<td>{{ index + 1 }}</td>
					<td>
						<span>{{ item.xm || "--" }}</span>
					</td>
					<td>
						<span>{{ item.xb || "--" }}</span>
					</td>
				</tr>
			</table>
		</div>

		<!-- 分页 -->
		<div class="Page">
			<el-pagination
				v-if="paginationShow"
				layout="prev, pager, next"
				:total="total"
				:page-size="rows"
				:current-page="page"
				@current-change="changePage"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				paginationShow: true, // 页面组件是否显示,解决total更新,导致current-page未被激活的问题
				page: 1,
				rows: 20,
				total: 0,
				list: [],
			};
		},
		created() {
			this.loadTable();
		},
		methods: {
			/**
			 * @name: 加载表格数据
			 */
			loadTable() {
				// 数据重置
				this.paginationShow = false;
				this.total = 0;
				this.list = [];

				getDeliveryManList()
					.then(({ data }) => {
						// 显示分页组件
						this.paginationShow = true;

						// 处理加载失败
						if (!data.success) {
							this.list = [];
							return;
						}

						// 处理数据为空
						if (!data.total) {
							this.list = [];
							return;
						}

						// 处理请求成功
						this.total = data.total;
						this.list = data.obj.obj;
					})
					.catch(() => {
						// 处理加载失败
						this.paginationShow = true;
						this.list = [];
					});
			},
			/**
			 * @name: 分页切换
			 * @param {Integer} page 页码
			 */
			changePage(page) {
				this.page = page;
				this.loadTable();
			},
		},
	};
</script>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值