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了。

目录
相关文章
VUE3(二十三)自定义分页组件Pagination
刚开始使用vue3写博客的时候,其相关配套的UI库并没有正式发布,但是我还要用,所以这里我自定义了一个分页组件。
642 0
VUE3(二十三)自定义分页组件Pagination
|
2月前
【UI】elementui el-pagination分页位置靠右
【UI】elementui el-pagination分页位置靠右
79 0
|
4月前
|
资源调度 JavaScript 前端开发
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
202 2
|
4月前
element plus 表各组件怎样和分页组件配合使用
element plus 表各组件怎样和分页组件配合使用
82 0
element-el-pagination 分页-控制每页展示数量(整理)
element-el-pagination 分页-控制每页展示数量(整理)
|
JavaScript
element组件中分页的使用
element组件中分页的使用
|
前端开发
Concis组件库封装——Pagination分页器
Concis组件库封装——Pagination分页器组件封装
101 1
Concis组件库封装——Pagination分页器
|
JavaScript
如何使用Pagination 分页组件
如何使用Pagination 分页组件
127 0
|
JavaScript
VUE element组件表格分页
VUE element组件表格分页