vue实现分页条数

Vue实现分页条数控制的方法

在Vue中实现分页条数控制通常需要结合分页组件和数据请求逻辑。以下是几种常见的实现方式：

使用Element UI的分页组件

Element UI提供了成熟的Pagination组件，可以轻松实现分页条数控制：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 50]"
    :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: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 根据pageSize和currentPage请求数据
    }
  }
}
</script>

自定义分页组件实现

如果需要更灵活的控制，可以自定义分页组件：

<template>
  <div class="pagination">
    <select v-model="pageSize" @change="updatePagination">
      <option value="5">5条/页</option>
      <option value="10">10条/页</option>
      <option value="20">20条/页</option>
    </select>
    <button @click="prevPage">上一页</button>
    <span>{{ currentPage }}</span>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    total: Number,
    currentPage: Number,
    pageSize: Number
  },
  methods: {
    updatePagination() {
      this.$emit('update:pageSize', parseInt(this.pageSize))
      this.$emit('page-change', 1) // 重置到第一页
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit('page-change', this.currentPage - 1)
      }
    },
    nextPage() {
      if (this.currentPage < Math.ceil(this.total / this.pageSize)) {
        this.$emit('page-change', this.currentPage + 1)
      }
    }
  }
}
</script>

结合后端API实现

实际项目中通常需要与后端API配合：

async fetchData() {
  try {
    const response = await axios.get('/api/data', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    })
    this.dataList = response.data.items
    this.total = response.data.total
  } catch (error) {
    console.error(error)
  }
}

使用Vuex管理分页状态

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

// store/modules/pagination.js
const state = {
  currentPage: 1,
  pageSize: 10,
  totalItems: 0
}

const mutations = {
  SET_PAGE_SIZE(state, size) {
    state.pageSize = size
  },
  SET_CURRENT_PAGE(state, page) {
    state.currentPage = page
  }
}

const actions = {
  updatePageSize({ commit }, size) {
    commit('SET_PAGE_SIZE', size)
    commit('SET_CURRENT_PAGE', 1) // 重置到第一页
  }
}

这些方法可以根据项目需求选择或组合使用，实现灵活的分页条数控制功能。