vue实现分页

vue实现分页的方法

使用Element UI的分页组件

Element UI提供了现成的分页组件el-pagination，可以快速实现分页功能。

安装Element UI：

npm install element-ui

在Vue组件中使用：

<template>
  <div>
    <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 {
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 根据currentPage和pageSize获取数据
    }
  }
}
</script>

自定义分页组件

如果需要更灵活的分页功能，可以自定义分页组件。

<template>
  <div class="pagination">
    <button 
      @click="changePage(currentPage - 1)" 
      :disabled="currentPage === 1">
      上一页
    </button>

    <span v-for="page in pages" :key="page">
      <button 
        @click="changePage(page)" 
        :class="{ active: currentPage === page }">
        {{ page }}
      </button>
    </span>

    <button 
      @click="changePage(currentPage + 1)" 
      :disabled="currentPage === totalPages">
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: Number,
    itemsPerPage: Number,
    currentPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    },
    pages() {
      const range = []
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i)
      }
      return range
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page)
      }
    }
  }
}
</script>

<style>
.pagination button {
  margin: 0 5px;
}
.pagination button.active {
  background-color: #42b983;
  color: white;
}
</style>

结合API实现分页

实际项目中通常需要从API获取分页数据。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <el-pagination
      @current-change="fetchData"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData(page = 1) {
      this.currentPage = page
      try {
        const response = await axios.get('/api/items', {
          params: {
            page,
            limit: this.pageSize
          }
        })
        this.items = response.data.items
        this.total = response.data.total
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

服务器端分页处理

后端API需要支持分页参数，常见的RESTful API分页参数格式：

// Express.js示例
app.get('/api/items', async (req, res) => {
  const page = parseInt(req.query.page) || 1
  const limit = parseInt(req.query.limit) || 10
  const offset = (page - 1) * limit

  const items = await Item.find().skip(offset).limit(limit)
  const total = await Item.countDocuments()

  res.json({
    items,
    total,
    page,
    limit
  })
})

分页优化技巧

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

<template>
  <div>
    <div v-if="loading">加载中...</div>
    <ul v-else>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    <el-pagination
      @current-change="fetchData"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :disabled="loading"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async fetchData(page) {
      this.loading = true
      try {
        // 获取数据逻辑
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

使用防抖减少频繁请求：

import _ from 'lodash'

export default {
  methods: {
    fetchData: _.debounce(function(page) {
      // 获取数据逻辑
    }, 300)
  }
}