当前位置：首页 > VUE

vue实现ajax数据分页

2026-02-23 06:01:38VUE

实现AJAX数据分页的Vue方案

在Vue中实现AJAX数据分页需要结合异步请求和分页组件。以下是具体实现方式：

安装axios（如未安装）

npm install axios

基础实现代码

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第{{ currentPage }}页/共{{ totalPages }}页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 0
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    }
  },
  methods: {
    fetchData() {
      axios.get(`/api/data?page=${this.currentPage}&size=${this.pageSize}`)
        .then(response => {
          this.items = response.data.items;
          this.totalItems = response.data.total;
        })
        .catch(error => {
          console.error(error);
        });
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchData();
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchData();
      }
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

使用分页组件的优化方案

对于更复杂的分页需求，可以使用现成的分页组件库：

安装Element UI分页组件

npm install element-ui

Element UI实现代码

<template>
  <div>
    <el-table :data="items">
      <el-table-column prop="name" label="名称"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 0
    };
  },
  methods: {
    fetchData() {
      axios.get(`/api/data`, {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      })
      .then(response => {
        this.items = response.data.items;
        this.totalItems = response.data.total;
      });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

服务器端API要求

后端API需要支持分页参数，通常应返回如下格式的数据：

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

性能优化建议

添加加载状态指示器提升用户体验：

data() {
  return {
    loading: false
  };
},
methods: {
  fetchData() {
    this.loading = true;
    axios.get(...)
      .then(...)
      .finally(() => {
        this.loading = false;
      });
  }
}

在模板中添加加载状态：

<el-table v-loading="loading" ...></el-table>

错误处理增强

为AJAX请求添加更完善的错误处理：

vue实现ajax数据分页

methods: {
  fetchData() {
    this.loading = true;
    axios.get(...)
      .then(...)
      .catch(error => {
        this.$message.error('数据加载失败');
        console.error(error);
      })
      .finally(...);
  }
}