引言

在Vue.js项目中，Element UI是一款非常流行的UI组件库，其中分页组件的使用尤为广泛。然而，在使用过程中，我们可能会遇到一些常见的问题，如分页切换数据后@current-change失效、第二页数据渲染错误、@current-change事件获取到的currentRow为null等。本文将针对这些问题进行详细解析，并提供相应的解决方案，帮助您轻松告别分页问题。

一、分页切换数据后@current-change失效

问题现象

在切换表格数据后，分页组件的@current-change事件不再触发，导致无法正常更新页面数据。

原因分析

这种问题通常是由于分页组件的渲染状态没有正确更新导致的。

解决方案

  1. 使用v-if指令重新渲染分页组件。
<div class="paginationBox" v-if="paginationBoxReflow">
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</div>
  1. 在切换数据之前，将paginationBoxReflow设置为false，并在切换完成后将其设置为true。
this.paginationBoxReflow = false;
this.nextTick(() => {
  this.paginationBoxReflow = true;
});

二、Element UI使用分页插件导致第二页数据出问题

问题现象

当点击页数时，如果切换一页显示的条数，页面会出现数据渲染不出来的情况。

原因分析

这种问题通常是由于分页组件的参数没有正确处理导致的。

解决方案

  1. 使用watch，在用户切换每页显示的条数时，将页码重置为1。
watch: {
  pageSize(newVal, oldVal) {
    this.currentPage = 1;
  }
}

三、Element el-table的@current-change事件在切换分页时获取到的currentRow为null

问题现象

在切换分页时，@current-change事件获取到的currentRow为null，导致后续操作报错。

原因分析

这种问题通常是由于在切换分页时，表格选中的行没有正确更新导致的。

解决方案

  1. 在@current-change事件中，判断currentRow是否有内容，如果有内容存在再进行接下来的操作。
@current-change="handleCurrentChange"

handleCurrentChange(currentRow, oldCurrentRow) {
  if (this.currentRow && this.LeftList.indexOf(currentRow.ID) > 0) {
    this.refs.leftTable.setCurrentRow(currentRow);
  }
}

四、关于Vue+Element UI项目的分页，返回默认显示第一页的问题解决

问题现象

在从新页面返回到当前页时，分页显示第一页，对应页面内容也是第一页。

原因分析

这种问题通常是由于页面缓存导致的。

解决方案

  1. 使用localStorage或sessionStorage将跳转页面前的currentPage存储起来。
// 给sessionStorage存值
setContextData: function(key, value) {
  if (typeof value === "string") {
    sessionStorage.setItem(key, value);
  } else {
    sessionStorage.setItem(key, JSON.stringify(value));
  }
},
// 从sessionStorage取值
getContextData: function(key) {
  const str = sessionStorage.getItem(key);
  if (typeof str === "string") {
    try {
      return JSON.parse(str);
    } catch (e) {
      return str;
    }
  }
  return;
},
  1. 在created生命周期中，获取到存储的currentPage，然后进行加载。
created() {
  const currentPage = this.getContextData("currentPage");
  if (currentPage) {
    this.currentPage = parseInt(currentPage, 10);
  }
},

总结

本文针对Vue Element分页切换常见Bug及解决方案进行了详细解析，包括分页切换数据后@current-change失效、Element UI使用分页插件导致第二页数据出问题、Element el-table的@current-change事件在切换分页时获取到的currentRow为null、关于Vue+Element UI项目的分页，返回默认显示第一页的问题解决等。希望本文能帮助您解决实际开发中遇到的问题，提高开发效率。