vue分页查询el-pagination第一页为0页怎么编写

在Vue.js中使用Element UI库的`el-pagination`组件进行分页查询时，如果你希望将第一页标记为0页而非默认的1页，可以稍微调整一下数据处理部分。假设你在后端API中获取的数据总页数和每页的数量不变，但在前端展示上，你可以这样操作：

1. 当获取到页面数据时，计算出实际的起始索引。如果当前页码是1，则起始索引为0；如果是其他页码，比如0页（即首页），起始索引则为前一页的结束位置加1。

data() {
  return {
    currentPage: 1, // 初始页码，这里设置为1
    totalItems: 0, // 总数据量
    perPage: 10, // 每页数量
    itemsPerPage: [], // 存储每页的数据
    startIndex: null,
  }
},
created() {
  this.fetchData();
},
methods: {
  fetchData(page = 1) {
    const start = page === 1 ? 0 : (page - 1) * this.perPage; // 计算起始索引
    this.$axios.get('/api/data', { params: { start, limit: this.perPage } })
      .then(response => {
        this.totalItems = response.data.total;
        this.itemsPerPage.push(...response.data.items);
        this.startIndex = start;
      });
  },
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
    }
  },
  nextPage() {
    if (this.currentPage < this.getTotalPages()) {
      this.currentPage++;
    }
  },
  getTotalPages() {
    return Math.ceil(this.totalItems / this.perPage);
  },
}

在这个例子中，`fetchData`方法会根据当前页码动态调整起始索引。同时，你需要在模板中显示页码时，传递`startIndex`而不是直接用`currentPage`：

<template>
  <div>
    <el-pagination
      :total="totalItems"
      :current-page.sync="currentPage"
      :page-size="perPage"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
    ></el-pagination>
    <ul>
      <li v-for="(item, index) in itemsPerPage" :key="index + startIndex">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
// ...
methods: {
  handleCurrentChange(currentPage) {
    this.fetchData(currentPage);
  }
}
</script>