vue+element封装分页组件＜每页条数由用户自定义＞

最新推荐文章于 2023-09-04 14:03:06 发布

大块博

最新推荐文章于 2023-09-04 14:03:06 发布

阅读量3.3k

点赞数 1

分类专栏：前端文章标签： vue js elementui

本文链接：https://blog.csdn.net/haibo1101/article/details/115860666

版权

本文介绍了如何基于Vue2.0和ElementUI封装一个分页组件，允许用户自定义每页显示的数据条数。通过在项目根目录创建可复用组件，编写相关代码，并在main.js中全局注册，实现动态调整表格每页展示的数据数量，以满足不同场景需求。

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

背景：因为当前项目主要是表格文件和数据的一个显示，所以大量的用到分页功能，思前想后决定写一个分页组件，方便美观。因为前端人员不是我自己，加上产品的建议，最后决定分页写定每页二十天条数据。分页每页多少条由用户自定义<vue2.0>

因为公司的数据量比较大，需要做批量处理的地方比较多，所以有时会根据情况自定义一些东西
大家也知道element的分页组件可以前端自己定义好一个数组去选择规格范围的每页条数，但是没有办法用户自定义输入任意数值。所以我这里就在抽取的全局分页组件里面多增加了一个参数和触发事件来达到公司的需求。
静态效果：<用户在条数/页里面输入自定义的数字，表格就可以自定义显示用户自定义每页显示的条数> 在这里插入图片描述

首先在项目的根目录下创建可复用组件

在components里面创建需要的组件
在组件里写入代码主要是涉及到父传子和子传父，因为刚开始写可复用封装组件，所以没敢写的太复杂

<template>
  <!-- 全局分页功能 -->
  <div class="content">
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      background
      small
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
    <div class="edit">
      <el-input v-model=