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

目录
相关文章
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
2674 0
element-ui Pagination分页只保留上一页下一页
有时数据量太大,比如日志数据没必要查看很久之前的,所以把页数屏蔽,不给系统造成卡顿,最简单的方式就是隐藏总条数、页数。具体做法来看一下吧
652 0
Element的el-table行列错位对不齐问题处理
本文目录 1. 问题表现 2. 问题发现 3. 问题处理 4. 另一种处理方案
6173 0
Element的el-table行列错位对不齐问题处理
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10656 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
前端开发
ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文
ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
Web App开发 前端开发 Android开发
svg图标无法修改颜色的解决方案
svg图标无法修改颜色的解决方案
【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案
【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案
1118 6
|
JavaScript 前端开发 数据管理
使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序
使用Sortable.js库 实现Vue3 elementPlus 的 el-table 拖拽排序
4709 1
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
3190 0

热门文章

最新文章