[JavaScript知识库]el-pagination设置current-page渲染失败

项目场景：

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

问题描述：

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

原因分析：

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

解决方案：

既然是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>