Element 分页二次封装

骑猪看日落 2023-07-19 12:29 3阅读 0赞

## 对分页进行了二次封装 ##

![效果图][2020033110303538.png]  
**调用**

<div class="pagination-container">
        <div class="total-box">
            <span class="total-num" >共 {
       { 100 }} 条</span >
        </div>
        <pagination :total="total2"></pagination>
    </div>

.pagination-container { 
      background: #fff;
      padding: 32px 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    
    }
    .pagination-container .total-num{ 
        margin-right: 10px;
        font-weight: 400;
        color: #606266;
        display: inline-block;
        font-size: 13px;
        margin-top: -2px;
    }
    
    .pagination-container.hidden { 
      display: none;
    }

**只封装分页器，功能放出来以达到复用**

<template>
        <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </template>
    
    <script> export default { name: 'Pagination', props: { total: { required: true, type: Number }, page: { type: Number, default: 1 }, limit: { type: Number, default: 15 }, layout: { type: String, default: 'prev, pager, next' }, background: { type: Boolean, default: false }, hidden: { type: Boolean, default: false } }, computed: { currentPage: { get() { return this.page }, set(val) { this.$emit('update:page', val) } }, pageSize: { get() { return this.limit }, set(val) { this.$emit('update:limit', val) } } }, methods: { handleSizeChange(val) { this.$emit('pagination', { page: this.currentPage, limit: val }) }, handleCurrentChange(val) { this.$emit('pagination', { page: val, limit: this.pageSize }) } } } </script>

[2020033110303538.png]: /images/20230528/e4c37ed2fcf44577997f05254082e6ac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3+element-ui + TS封装全局分页组件

本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。环境依赖在开始之前，你需要安装以下环境： Vue3 ele

缺乏、安全感/ 2023年10月13日 11:57/ 0 赞/ 2 阅读

相关 Element 分页二次封装

对分页进行了二次封装 ![效果图][2020033110303538.png] 调用 <div class="pagination-container">

骑猪看日落/ 2023年07月19日 12:29/ 0 赞/ 4 阅读

相关 Element表格二次封装

基础表格（修改表头及移除默认hover事件） <template> <el-table class="table-wrapper" :data="

比眉伴天荒/ 2023年07月17日 02:50/ 0 赞/ 11 阅读

相关 Element-UI el-dialog 二次封装复用

> 我很希望项目中可以多接触一些新东西，实践出真知，对于编程来说就是要多动手，多总结几录，多思考，才能更好的避坑，因为动手了会发现好多你以为的不是你以为的。概述 PC

r囧r小猫/ 2022年11月25日 04:05/ 0 赞/ 290 阅读

相关 element分页问题

![在这里插入图片描述][20210330171821925.png] [20210330171821925.png]: /images/20221022/1e1ec07d

╰+攻爆jí腚メ/ 2022年11月15日 01:23/ 0 赞/ 195 阅读

相关 element分页

这是element中的分页，具体的使用方法如下，亲测有效 <div class="block"> <el-pagination

快来打我*/ 2022年09月16日 13:28/ 0 赞/ 256 阅读

相关分页封装

public class Page { private Integer currentPage;//当前页 private int pa

分手后的思念是犯贱/ 2022年05月20日 10:44/ 0 赞/ 259 阅读

相关 ElementUI 分页组件二次封装

更新记录：修复了删除当前所有数据未触发退回上一页问题。改善了调用方式，仅需传入分页对象与绑定查询事件。改为通过 model 更新分页对象。修复

Myth丶恋晨/ 2022年05月08日 23:58/ 0 赞/ 515 阅读

相关 vue项目中element的表格二次封装

1. 简介 > 因小编之前主写react，已经习惯数据表格的json配置；而element-ui的table主要是以template的方式进行页面的渲染，容易造成业务代码

客官°小女子只卖身不卖艺/ 2021年11月17日 07:08/ 0 赞/ 347 阅读

相关 vue基于element-ui二次封装分页组件和一些优化

先来看一下整体的需求分析 1. 有表格的地方，就有分页，怎么做到表格样式统一 2. 多个分页，代码重复，如何减少代码重复 3. 地址栏输入页码，如何去通知当前分页状

你的名字/ 2021年09月03日 07:37/ 0 赞/ 600 阅读