ElementUI 分组(elementui分页功能)

在使用ElementUI进行项目开发时，如果涉及到大量数据展示，分页功能是必不可少的。针对ElementUI实现分页功能，解决方案主要是利用ElementUI提供的el-pagination组件来处理分页逻辑，并且与表格等展示组件相结合，从而有效地控制每页显示的数据量。

一、基于 el-pagination 的基本分页

这是最直接的一种思路。需要在页面中引入必要的组件。假设我们有一个数据列表dataList，它包含了所有要展示的数据。然后定义两个变量：currentPage表示当前页码，默认为1；pageSize表示每页显示的数据条数。

html

  <div>
    <!-- 展示数据区域 -->
    <ul>
      <li>{{ item }}</li>
    </ul>
    <!-- 分页组件 -->
    
    
  </div>
</p>


export default {
  data() {
    return {
      dataList: [/* 假设这里有很多数据项 */],
      currentPage: 1,
      pageSize: 5 // 每页显示5条数据
    };
  },
  computed: {
    // 计算属性获取当前页应该显示的数据
    paginatedData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      return this.dataList.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  }
};


<p>

二、结合服务端分页

当数据量非常大时，前端一次性加载所有数据可能会导致性能问题。此时可以采用服务端分页的方式。在发送请求时带上页码和每页大小参数，后端根据这些参数返回对应的数据。

html

  <div>
    <ul>
      <li>{{ item }}</li>
    </ul>
    
    
  </div>
</p>


export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0, // 总数据量
      serverData: [] // 当前页的数据
    };
  },
  methods: {
    async fetchData() {
      try {
        const res = await this.$axios.get('/api/data', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        });
        this.serverData = res.data.list; // 后端返回的数据列表字段可能不同
        this.total = res.data.total; // 后端返回的总数据量字段可能不同
      } catch (error) {
        console.error(error);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 切换每页显示数量时重置到页
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
};


<p>

这两种思路都可以很好地实现ElementUI的分页功能，开发者可以根据实际需求选择合适的方式。如果是小规模数据，种方式简单易行；而面对大规模数据时，第二种方式则更加高效。

（本文来源：nzw6.com）