vue实现接口分页

vue实现接口分页的方法

使用axios发送分页请求

在Vue项目中，可以通过axios发送分页请求到后端接口。通常后端接口会接受page和pageSize参数，返回分页数据。

import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      list: []
    }
  },
  methods: {
    async fetchData() {
      const res = await axios.get('/api/list', {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize
        }
      });
      this.list = res.data.list;
      this.total = res.data.total;
    }
  },
  created() {
    this.fetchData();
  }
}

结合Element UI的分页组件

如果使用Element UI，可以配合其分页组件el-pagination实现完整的分页功能。

<template>
  <div>
    <el-table :data="list">
      <!-- 表格内容 -->
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next">
    </el-pagination>
  </div>
</template>

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

使用Vuex管理分页状态

对于大型项目，建议使用Vuex集中管理分页状态。

// store/modules/list.js
const state = {
  currentPage: 1,
  pageSize: 10,
  total: 0,
  list: []
};

const mutations = {
  SET_LIST(state, payload) {
    state.list = payload.list;
    state.total = payload.total;
  },
  SET_PAGE(state, page) {
    state.currentPage = page;
  }
};

const actions = {
  async fetchList({ commit, state }) {
    const res = await axios.get('/api/list', {
      params: {
        page: state.currentPage,
        pageSize: state.pageSize
      }
    });
    commit('SET_LIST', res.data);
  }
};

实现无限滚动分页

对于移动端或需要无限滚动的场景，可以监听滚动事件实现分页加载。

export default {
  data() {
    return {
      isLoading: false,
      isFinished: false,
      page: 1,
      list: []
    }
  },
  methods: {
    async loadMore() {
      if (this.isLoading || this.isFinished) return;

      this.isLoading = true;
      const res = await axios.get('/api/list', {
        params: {
          page: this.page,
          pageSize: 10
        }
      });

      this.list = [...this.list, ...res.data.list];
      this.page++;
      this.isLoading = false;

      if (res.data.list.length < 10) {
        this.isFinished = true;
      }
    },
    handleScroll() {
      const scrollHeight = document.documentElement.scrollHeight;
      const scrollTop = document.documentElement.scrollTop;
      const clientHeight = document.documentElement.clientHeight;

      if (scrollTop + clientHeight >= scrollHeight - 50) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}

使用分页hook封装

可以将分页逻辑封装为可复用的hook，提高代码复用性。

// hooks/usePagination.js
import { ref } from 'vue';
import axios from 'axios';

export default function usePagination(apiUrl) {
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const list = ref([]);
  const loading = ref(false);

  const fetchData = async () => {
    loading.value = true;
    try {
      const res = await axios.get(apiUrl, {
        params: {
          page: currentPage.value,
          pageSize: pageSize.value
        }
      });
      list.value = res.data.list;
      total.value = res.data.total;
    } finally {
      loading.value = false;
    }
  };

  const handlePageChange = (page) => {
    currentPage.value = page;
    fetchData();
  };

  return {
    currentPage,
    pageSize,
    total,
    list,
    loading,
    fetchData,
    handlePageChange
  };
}