How to implement data paging and loading through vue and Element-plusMore

How to realize paging and loading of data through vue and Element-plus

In front-end development, we often encounter scenarios where a large amount of data needs to be displayed in paging, especially when dealing with page turning and When loading more functions, we can use vue and Element-plus to quickly implement these functions. This article will introduce how to implement data paging and load more through vue and Element-plus.

First, we need to introduce vue and Element-plus into the project.

# 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')

Next, we need to create a component for displaying data.

<!-- 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>

In this sample code, we use vue's calculated properties to slice the data and display the corresponding data based on the current page number and the number of items per page. At the same time, we used the el-pagination component in Element-plus to display the paging function, and the el-button component as a load more button.

We called the getDataList method in the mounted hook to obtain data. You can replace it with an interface request according to the actual situation. Axios is used here to simulate the acquisition of data. When the data is obtained successfully, we assign the returned data to dataList, calculate the total number of records and whether to display the load more button. When the page number changes, we use the handleCurrentChange method to update the current page number and recalculate the data of the current page. When the Load More button is clicked, we use the handleLoadMore method to load the data for the next page.

The above are examples of paging and loading more data through vue and Element-plus. It can be adjusted and expanded according to actual business needs. I hope it will be helpful to you!

The above is the detailed content of How to implement data paging and loading through vue and Element-plusMore. For more information, please follow other related articles on the PHP Chinese website!