vue如何实现分业

Vue 实现分页的方法

在 Vue 中实现分页功能通常需要结合后端接口或前端数据处理。以下是几种常见的实现方式：

使用第三方分页组件

许多 UI 库提供了现成的分页组件，例如 Element UI 的 el-pagination：

<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 调用API获取数据
    }
  }
}
</script>

纯前端分页实现

如果数据量不大，可以在前端实现分页逻辑：

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <div class="pagination">
      <button @click="prevPage">上一页</button>
      <span>第{{ currentPage }}页</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据
      currentPage: 1,
      pageSize: 10,
      paginatedData: []
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize)
    }
  },
  methods: {
    paginate() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      this.paginatedData = this.allData.slice(start, end)
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.paginate()
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        this.paginate()
      }
    }
  },
  mounted() {
    // 获取数据后调用paginate
    this.paginate()
  }
}
</script>

使用 Vuex 管理分页状态

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

// store.js
export default new Vuex.Store({
  state: {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0
  },
  mutations: {
    SET_PAGE(state, page) {
      state.currentPage = page
    },
    SET_PAGE_SIZE(state, size) {
      state.pageSize = size
    },
    SET_TOTAL_ITEMS(state, total) {
      state.totalItems = total
    }
  },
  actions: {
    fetchPaginatedData({state, commit}, params) {
      // 调用API
      return api.get('/items', {
        params: {
          page: state.currentPage,
          size: state.pageSize,
          ...params
        }
      }).then(response => {
        commit('SET_TOTAL_ITEMS', response.data.total)
        return response.data.items
      })
    }
  }
})

无限滚动分页

对于移动端或需要流畅浏览体验的场景，可以实现无限滚动：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id">
      <!-- 项目内容 -->
    </div>
    <div v-if="loading" class="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      isLoading: false,
      hasMore: true
    }
  },
  methods: {
    handleScroll(e) {
      const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight
      if (bottom && !this.isLoading && this.hasMore) {
        this.loadMore()
      }
    },
    loadMore() {
      this.isLoading = true
      this.currentPage++

      api.get('/items', {params: {page: this.currentPage}})
        .then(response => {
          this.items = [...this.items, ...response.data.items]
          this.hasMore = response.data.hasMore
        })
        .finally(() => {
          this.isLoading = false
        })
    }
  },
  mounted() {
    this.loadMore()
  }
}
</script>

选择哪种实现方式取决于具体需求、数据量和应用架构。后端分页适合大数据量场景，前端分页适合小数据量，无限滚动则能提供更好的用户体验。