在前端开发中，实现数据分页及加载更多功能能够有效提升用户体验，尤其是在处理大量数据时。Vue 与 Element-plus 的组合为我们提供了便捷的方式来达成这一目标。

我们需要搭建一个基于 Vue 和 Element-plus 的项目。可以使用 Vue CLI 快速创建项目，并安装 Element-plus 依赖。

在实现数据分页时，Element-plus 的 ElPagination 组件是关键。我们在模板中引入该组件，并绑定相关属性。例如：

<el-pagination
  :current-page.sync="currentPage"
  :page-size="pageSize"
  :total="totalCount"
  @current-change="handleCurrentChange"
></el-pagination>

这里，currentPage 表示当前页码，pageSize 是每页显示的数据条数，totalCount 为数据的总数量。当 current-change 事件触发时，即用户切换页码时，会调用 handleCurrentChange 方法。

在 script 部分，我们定义这些数据和方法：

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      dataList: []
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    async fetchData() {
      const response = await axios.get(`/api/data?page=${this.currentPage}&limit=${this.pageSize}`);
      this.dataList = response.data.data;
      this.totalCount = response.data.total;
    }
  },
  mounted() {
    this.fetchData();
  }
};

fetchData 方法通过发送 HTTP 请求获取对应页码的数据，并更新 dataList 和 totalCount。

而加载更多功能可以通过监听滚动事件来实现。我们在 mounted 钩子函数中添加如下代码：

mounted() {
  window.addEventListener('scroll', this.handleScroll);
  this.fetchData();
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    const scrollHeight = document.documentElement.scrollHeight;
    if (scrollTop + clientHeight >= scrollHeight - 100) {
      this.currentPage++;
      this.fetchData();
    }
  }
}

通过判断滚动条位置，当接近页面底部时，增加页码并重新获取数据。

通过上述步骤，利用 Vue 与 Element-plus，我们成功实现了数据分页及加载更多功能，为用户提供流畅的数据浏览体验。