elementui点击第二页时没数据显示;element ui 分页 bug

在使用 Element UI 的分页组件时，有时会遇到点击第二页或后续页时没有数据显示的问题。本文将介绍几种解决该问题的方法，并提供相应的代码示例。

解决方案概述

出现这个问题的原因通常是由于数据加载和分页组件的配合不一致导致的。解决方法主要包括以下几种：

确保数据加载完成后再更新分页组件
使用 watch 监听分页组件的当前页变化
手动触发数据加载

确保数据加载完成后再更新分页组件

首先，确保在数据加载完成后再更新分页组件的当前页。这可以通过在数据请求成功后设置分页组件的 currentPage 属性来实现。

html

  <div>
    
      
      
      
    
    
    
  </div>
</p>


export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟数据请求
      setTimeout(() => {
        const data = this.generateData(this.currentPage, this.pageSize);
        this.tableData = data;
        this.total = 100; // 假设总共有100条数据
      }, 1000);
    },
    generateData(page, size) {
      const start = (page - 1) * size;
      const end = start + size;
      return Array.from({ length: end - start }, (_, i) => ({
        date: '2016-05-02',
        name: `王小虎${i}`,
        address: '上海市普陀区金沙江路 1518 弄'
      }));
    }
  },
  created() {
    this.fetchData();
  }
};


<p>

使用 `watch` 监听分页组件的当前页变化

通过 watch 监听分页组件的当前页变化，可以在页面变化时重新加载数据。

html

  <div>
    
      
      
      
    
    
    
  </div>
</p>


export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  watch: {
    currentPage: {
      handler(newVal) {
        this.fetchData();
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    fetchData() {
      // 模拟数据请求
      setTimeout(() => {
        const data = this.generateData(this.currentPage, this.pageSize);
        this.tableData = data;
        this.total = 100; // 假设总共有100条数据
      }, 1000);
    },
    generateData(page, size) {
      const start = (page - 1) * size;
      const end = start + size;
      return Array.from({ length: end - start }, (_, i) => ({
        date: '2016-05-02',
        name: `王小虎${i}`,
        address: '上海市普陀区金沙江路 1518 弄'
      }));
    }
  },
  created() {
    this.fetchData();
  }
};


<p>

手动触发数据加载

在某些情况下，可能需要手动触发数据加载。例如，在用户点击分页按钮后，手动调用数据加载方法。

html

  <div>
    
      
      
      
    
    
    
  </div>
</p>


export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟数据请求
      setTimeout(() => {
        const data = this.generateData(this.currentPage, this.pageSize);
        this.tableData = data;
        this.total = 100; // 假设总共有100条数据
      }, 1000);
    },
    generateData(page, size) {
      const start = (page - 1) * size;
      const end = start + size;
      return Array.from({ length: end - start }, (_, i) => ({
        date: '2016-05-02',
        name: `王小虎${i}`,
        address: '上海市普陀区金沙江路 1518 弄'
      }));
    }
  },
  created() {
    this.fetchData();
  }
};


<p>

通过以上几种方法，可以有效解决 Element UI 分页组件在点击第二页或后续页时没有数据显示的问题。希望这些解决方案能帮助你在项目中顺利使用 Element UI 的分页组件。