Vue分页实现：数据，组件，渲染，揭秘前端魔法

2023-05-09 16:57:26

Vue分页：打造流畅、便捷的数据展示系统

数据获取：向服务器请求数据

分页系统的起点在于从服务器获取数据。使用流行的axios库，开发者可以轻松发送HTTP请求，获取所需的分页数据。axios提供了简洁易用的API，让开发者专注于业务逻辑，而无需为底层网络通信烦恼。

分页器实现：element-ui助你一臂之力

为了呈现美观且功能强大的分页器，element-ui库是一个不可多得的帮手。它提供了一系列现成的分页器组件，只需简单的配置，开发者便能快速搭建出符合项目需求的分页器。element-ui的分页器组件不仅视觉效果上乘，还提供了丰富的功能，例如页码跳转、每页大小切换等，满足开发者对分页器的各种需求。

页面渲染：用v-for和组件呈现数据

将分页数据渲染到页面上是分页系统的最后一步。Vue提供了强大的v-for指令，可以轻松地遍历分页数据，并利用组件的强大功能，将数据列表渲染成可视化的界面。通过合理使用v-for和组件，开发者可以灵活地控制数据的展示方式，为用户提供清晰直观的数据展示体验。

实例代码：一步步教你实现Vue分页

<template>
  <div>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="10"
      :total="100"
    />
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'
import { ElPagination } from 'element-ui'

export default {
  components: { ElPagination },
  setup() {
    const items = ref([])
    const page = ref(1)
    const pageSize = ref(10)
    const total = ref(0)

    const fetchItems = () => {
      axios.get('/api/items', {
        params: {
          page: page.value,
          pageSize: pageSize.value
        }
      })
      .then(response => {
        items.value = response.data.items
        total.value = response.data.total
      })
    }

    const handleCurrentChange = (val) => {
      page.value = val
      fetchItems()
    }

    return {
      items,
      page,
      pageSize,
      total,
      fetchItems,
      handleCurrentChange
    }
  }
}
</script>