Cara melaksanakan halaman dan pemuatan data melalui vue dan Element-plusMore

Bagaimana untuk merealisasikan paging dan memuatkan lebih banyak data melalui vue dan Element-plus

Dalam pembangunan bahagian hadapan, kami sering menghadapi senario di mana sejumlah besar data perlu dinomborkan dan dipaparkan, terutamanya apabila berurusan dengan perubahan halaman dan memuatkan lebih banyak fungsi . , kami boleh melaksanakan fungsi ini dengan cepat dengan bantuan vue dan Element-plus. Artikel ini akan memperkenalkan cara melaksanakan paging data dan memuatkan lebih banyak melalui vue dan Element-plus.

Pertama, kami perlu memperkenalkan vue dan Element-plus ke dalam projek.

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

Seterusnya, kita perlu mencipta komponen untuk memaparkan 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>

Dalam kod sampel ini, kami menggunakan sifat terkira vue untuk menghiris data dan memaparkan data yang sepadan berdasarkan nombor halaman semasa dan bilangan item setiap halaman. Pada masa yang sama, kami menggunakan komponen el-penomboran dalam Element-plus untuk memaparkan fungsi paging, dan komponen el-butang sebagai butang muat lagi.

Kami memanggil kaedah getDataList dalam cangkuk yang dipasang untuk mendapatkan data Anda boleh menggantikannya dengan permintaan antara muka mengikut situasi sebenar Axios digunakan di sini untuk mensimulasikan pemerolehan data. Apabila data diperolehi dengan jayanya, kami memberikan data yang dikembalikan kepada dataList, mengira jumlah bilangan rekod dan sama ada untuk memaparkan butang muatkan lagi. Apabila nombor halaman berubah, kami menggunakan kaedah handleCurrentChange untuk mengemas kini nombor halaman semasa dan mengira semula data halaman semasa. Apabila butang Muat Lagi diklik, kami menggunakan kaedah handleLoadMore untuk memuatkan data untuk halaman seterusnya.

Di atas ialah contoh halaman dan memuatkan lebih banyak data melalui vue dan Element-plus. Ia boleh diselaraskan dan dikembangkan mengikut keperluan perniagaan sebenar. Saya harap ia akan membantu anda!

Atas ialah kandungan terperinci Cara melaksanakan halaman dan pemuatan data melalui vue dan Element-plusMore. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!