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

目录
相关文章
|
JavaScript
Vue~在线预览doc、docx、pdf、img文件
Vue~在线预览doc、docx、pdf、img文件
8501 0
|
存储 JSON 数据库
vue3中实现文件上传---通过element-plus的upload组件
vue3中实现文件上传---通过element-plus的upload组件
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
1569 0
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29757 154
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
4265 1
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
1654 0
|
JavaScript 前端开发 API
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript IDE 开发工具
找不到模块“./App.vue”或其相应的类型声明。ts(2307)
这篇文章介绍了在Vue 3 + TypeScript + Vite开发环境中解决找不到`.vue`文件模块或其类型声明错误的两种方法:使用VSCode的TypeScript Vue Plugin (Volar)插件或手动在`env.d.ts`文件中声明`*.vue`模块类型。
4128 1
找不到模块“./App.vue”或其相应的类型声明。ts(2307)
|
前端开发
ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文
ElementPlus中total出现el.pagination.total,显示总数没有出现怎样解决,出现的是英文,不是中文如何解决,这里如何配置中文,配置中文
|
移动开发 前端开发
vue3 Element-Plus封装的el-tree-select的使用
vue3 Element-Plus封装的el-tree-select的使用
3791 0
vue3 Element-Plus封装的el-tree-select的使用

热门文章

最新文章