vue实现页面分页

Vue实现页面分页的方法

使用Element UI的分页组件

Element UI提供了现成的分页组件el-pagination，适合快速集成。以下是一个示例代码：

<template>
  <div>
    <el-table :data="currentPageData">
      <!-- 表格内容 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 所有数据
      currentPageData: [], // 当前页数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.updateCurrentPageData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.updateCurrentPageData()
    },
    updateCurrentPageData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      this.currentPageData = this.tableData.slice(start, end)
    }
  },
  created() {
    // 模拟获取数据
    this.tableData = Array.from({length: 100}, (_, i) => ({id: i, name: `Item ${i}`}))
    this.total = this.tableData.length
    this.updateCurrentPageData()
  }
}
</script>

自定义分页实现

如果不使用UI框架，可以手动实现分页功能：

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

<script>
export default {
  data() {
    return {
      items: [], // 所有数据
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.items.length / this.itemsPerPage)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.items.slice(start, end)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  },
  created() {
    // 模拟数据
    this.items = Array.from({length: 100}, (_, i) => ({id: i, name: `Item ${i}`}))
  }
}
</script>

结合后端API的分页

实际项目中通常需要与后端API交互，实现真正的分页查询：

<template>
  <div>
    <el-table :data="tableData" loading-text="加载中..." v-loading="loading">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      // 替换为实际的API调用
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      }).then(response => {
        this.tableData = response.data.items
        this.total = response.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

使用Vuex管理分页状态

对于复杂应用，可以使用Vuex集中管理分页状态：

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

const mutations = {
  SET_ITEMS(state, payload) {
    state.items = payload.items
    state.pagination.total = payload.total
  },
  SET_PAGE(state, page) {
    state.pagination.currentPage = page
  }
}

const actions = {
  async fetchItems({ commit, state }) {
    const { currentPage, pageSize } = state.pagination
    const response = await api.getItems(currentPage, pageSize)
    commit('SET_ITEMS', {
      items: response.data.items,
      total: response.data.total
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在组件中使用：

<template>
  <div>
    <el-table :data="items">
      <!-- 表格内容 -->
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('data', ['items', 'pagination'])
  },
  methods: {
    ...mapActions('data', ['fetchItems']),
    handleCurrentChange(page) {
      this.$store.commit('data/SET_PAGE', page)
      this.fetchItems()
    }
  },
  created() {
    this.fetchItems()
  }
}
</script>