当前位置：首页 > VUE

vue中实现分页查询

2026-01-21 15:34:04VUE

在Vue中实现分页查询

分页组件与数据绑定

使用第三方分页组件如Element UI的el-pagination，或自定义分页组件。绑定current-page和page-size到数据模型，监听current-change和size-change事件。

<el-pagination
  v-model:current-page="currentPage"
  v-model:page-size="pageSize"
  :total="total"
  @current-change="handleCurrentChange"
  @size-change="handleSizeChange"
/>

数据请求与参数传递

在Vue的methods中定义请求方法，将分页参数传递给后端API。通常需要currentPage和pageSize参数。

methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    }).then(response => {
      this.list = response.data.list;
      this.total = response.data.total;
    });
  }
}

处理分页事件

在分页事件触发时重新请求数据。current-change事件处理页码变化，size-change事件处理每页条数变化。

handleCurrentChange(val) {
  this.currentPage = val;
  this.fetchData();
},
handleSizeChange(val) {
  this.pageSize = val;
  this.fetchData();
}

初始加载与监听

在created或mounted钩子中初始化数据，监听分页参数变化时自动触发请求。

created() {
  this.fetchData();
},
watch: {
  currentPage() {
    this.fetchData();
  },
  pageSize() {
    this.fetchData();
  }
}

后端接口配合

后端接口需支持分页参数，通常使用page和size或类似参数。返回数据包含当前页的数据列表和总条数。

{
  "list": [...],
  "total": 100
}

自定义分页组件

若需自定义分页组件，可通过计算属性生成页码数组，结合v-for渲染页码按钮。

<div class="pagination">
  <button 
    v-for="page in pageNumbers" 
    :key="page"
    @click="goToPage(page)"
  >{{ page }}</button>
</div>

computed: {
  pageNumbers() {
    const pages = [];
    for (let i = 1; i <= Math.ceil(this.total / this.pageSize); i++) {
      pages.push(i);
    }
    return pages;
  }
}

vue中实现分页查询