vue项目中分页组件

最新推荐文章于 2024-04-17 19:26:37 发布

蓝色的落叶

最新推荐文章于 2024-04-17 19:26:37 发布

阅读量304

点赞数

分类专栏： vue项目 elementUI 文章标签： vue element 分页组件

本文链接：https://blog.csdn.net/qq_38502227/article/details/100932575

版权

本文介绍了如何在Vue项目中使用Element UI框架来实现分页组件。内容包括分页组件的前后效果展示，以及上一页下一页功能通过字体图标实现的细节。文章末尾邀请读者对可能存在的不清晰或问题进行指正。

摘要由CSDN通过智能技术生成

注意：
1.下面代码按钮和下拉框用的是element ui 框架
2. 上一页下一页用的是字体图标
一.

// 父组件
<template>
  <div>
      <Pagination :paginationData="paginationData" @paginationChange="paginationChange"></Pagination>
  </div>
</template>
<script>
import Pagination from "@/components/common/Pagination";
export default {
   
  components: {
    Pagination },
  data() {
   
    return {
   
      paginationData: {
   
        total: 583,
        page: 1,
        pageSizes: [
		  {
    value: 1, label: 10 },
		  {
    value: 2, label: 20 },
		  {
    value: 3, label: 50 },
		  {
    value: 4, label: 100 }
		],
        totalPage: 0,
        pageSize:10,
        selectValue: pageSize,
      }
    };
  },
  methods: {
   
      paginationChange(value) {
   
      console.log(value);
    }
  }
};

子组件

<template>
  <!-- 公用分页 -->
  <div class="pagination">
    <el-button icon="iconfont icon-pre_all" @click="homePage"></el-button>
    <el-button class="pre" icon="iconfont icon-pre" @click="previousPage"></el-button>
    <div class="total-size">
      &nbsp;
      <span class="current-page">{
  {paginationData.page}}</span>
      &nbsp;/&nbsp;{
  {paginationData.totalPage}}&nbsp;