elementUI使用Pagination分页组件增加自定义slot

简介: 本文介绍了如何在Element UI的Pagination分页组件中使用自定义slot。通过在`el-pagination`标签内的适当位置添加slot内容,可以在分页组件中插入自定义的HTML或组件。文章提供了一个示例代码,展示了如何添加两个自定义slot,并展示了最终效果。

elementUI使用Pagination分页组件增加自定义slot

起初看文档,并不是一看就秒懂…
还是记录下吧。
solt:

在这里插入图片描述
layout:
在这里插入图片描述
其实很简单,只需要在任意位置拼接solt即可…
看例子:

    <div class="pagination">
      <el-pagination
        style="display:flex"
        background
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,100, 200, 300]"
        :current-page="pageTotal.currentPage"
        :page-size="pageTotal.pageSize"
        :total="pageTotal.totalSize"
        layout="slot,prev, pager, next,sizes,slot"
      >
        <div key="1">第一个slot</div>
        <div key="2">第二个slot</div>
      </el-pagination>
    </div>
    <!-- layout="total, sizes, prev, pager, next, jumper" -->

在这里插入图片描述

在这里插入图片描述
样式自己调整就ok了。

目录
相关文章
|
7天前
|
前端开发 UED 开发者
React 分页组件 Pagination
本文介绍了如何在 React 中实现分页组件,从基础概念到常见问题及解决方案。分页组件用于将大量数据分成多个页面,提升用户体验。文章详细讲解了分页组件的基本结构、快速入门步骤、以及如何处理页面跳转不平滑、页码过多导致布局混乱、边界条件处理和数据加载延迟等问题。通过本文,读者可以全面了解并掌握 React 分页组件的开发技巧。
12 2
VUE3(二十三)自定义分页组件Pagination
刚开始使用vue3写博客的时候,其相关配套的UI库并没有正式发布,但是我还要用,所以这里我自定义了一个分页组件。
670 0
VUE3(二十三)自定义分页组件Pagination
|
4月前
【UI】elementui el-pagination分页位置靠右
【UI】elementui el-pagination分页位置靠右
206 0
|
6月前
|
资源调度 JavaScript 前端开发
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
318 2
|
6月前
|
JavaScript
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
Ant design vue 样式调整(包含导航栏、a-table表格、分页)
522 1
|
6月前
element plus 表各组件怎样和分页组件配合使用
element plus 表各组件怎样和分页组件配合使用
100 0
|
前端开发
Concis组件库封装——Pagination分页器
Concis组件库封装——Pagination分页器组件封装
107 1
Concis组件库封装——Pagination分页器
element-el-pagination 分页-控制每页展示数量(整理)
element-el-pagination 分页-控制每页展示数量(整理)
|
JavaScript
element组件中分页的使用
element组件中分页的使用