Comment implémenter la pagination et le chargement des données via vue et Element-plusMore

Comment réaliser la pagination et le chargement de plus de données via vue et Element-plus

Dans le développement front-end, nous rencontrons souvent des scénarios dans lesquels une grande quantité de données doit être paginée et affichée, en particulier lorsqu'il s'agit de tourner les pages et de charger plus de fonctions , nous pouvons rapidement implémenter ces fonctions à l'aide de vue et Element-plus. Cet article expliquera comment implémenter la pagination des données et en charger davantage via vue et Element-plus.

Tout d'abord, nous devons introduire vue et Element-plus dans le projet.

# main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

Ensuite, nous devons créer un composant pour afficher les données.

<!-- DataList.vue -->

<template>
  <div>
    <ul>
      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>
    </ul>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="total"
      layout="sizes, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <el-button
      v-show="showLoadMore"
      @click="handleLoadMore"
      type="text"
    >加载更多</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      total: 0, // 总记录数
      pageSize: 10, // 每页条数
      showLoadMore: false, // 是否显示加载更多按钮
      dataList: [], // 数据列表
    }
  },
  computed: {
    currentPageData() { // 当前页的数据
      return this.dataList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    },
  },
  mounted() {
    this.getDataList() // 初始化数据
  },
  methods: {
    async getDataList() {
      // 这里模拟获取数据，实际开发中可替换为接口请求
      // 示例：通过axios请求数据
      const response = await axios.get('/api/dataList')
      
      this.dataList = response.data
      this.total = this.dataList.length
      
      this.showLoadMore = this.currentPage * this.pageSize < this.total // 是否显示加载更多按钮
    },
    handleCurrentChange(currentPage) { // 页码改变时触发
      this.currentPage = currentPage
    },
    handleLoadMore() { // 加载更多
      this.currentPage++
      this.showLoadMore = this.currentPage * this.pageSize < this.total // 是否显示加载更多按钮
    },
  },
}
</script>

<style scoped>

</style>

Dans cet exemple de code, nous utilisons les propriétés calculées de vue pour découper les données et afficher les données correspondantes en fonction du numéro de page actuel et du nombre d'éléments par page. Dans le même temps, nous avons utilisé le composant el-pagination dans Element-plus pour afficher la fonction de pagination, et le composant el-button comme bouton de chargement supplémentaire.

Nous avons appelé la méthode getDataList dans le hook monté pour obtenir des données. Vous pouvez la remplacer par une requête d'interface en fonction de la situation réelle. Axios est utilisé ici pour simuler l'acquisition de données. Lorsque les données sont obtenues avec succès, nous attribuons les données renvoyées à dataList, calculons le nombre total d'enregistrements et s'il faut afficher le bouton Charger plus. Lorsque le numéro de page change, nous utilisons la méthode handleCurrentChange pour mettre à jour le numéro de page actuel et recalculer les données de la page actuelle. Lorsque l'on clique sur le bouton Charger plus, nous utilisons la méthode handleLoadMore pour charger les données de la page suivante.

Ce qui précède est un exemple de pagination et de chargement de plus de données via vue et Element-plus. Il peut être ajusté et étendu en fonction des besoins réels de votre entreprise. J'espère qu'il vous sera utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!