elementui 实现一个固定位置的Pagination(分页)组件

系列文章目录

一、elementui 导航菜单栏和Breadcrumb 面包屑关联

二、elementui 左侧导航菜单栏与main区域联动

三、elementui 中设置图片的高度并支持PC和手机自适应

四、 elementui 实现一个固定位置的Pagination(分页)组件


文章目录

  • 系列文章目录
  • 前言
  • 一、实现效果
  • 二、实现步骤
    • 1.添加Pagination组件
    • 2.CSS样式代码
  • 三、完整代码


前言

在Element UI中,要实现一个固定位置的Pagination(分页)组件,可以使用CSS来固定Pagination的位置,并将Pagination组件包裹在一个固定位置的容器中。


一、实现效果

在该网页的右下角固定位置
在这里插入图片描述

二、实现步骤

PS:针对有一点点vue基础的新手

1.添加Pagination组件

在你的Vue组件中添加Pagination组件

 <!--添加Pagination组件--><div class="pagination-container"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[4, 8, 12]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div><script>export default {name: "FileView",data() {return {currentPage: 1,pageSize: 8,total: 10,};},computed: {currentPageData() {return this.items.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);}},methods: {handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},handleCurrentChange(val) {this.currentPage = val;}}};
</script>

2.CSS样式代码

在你的样式文件中(例如

<style scoped>.maindiv {/* 确保.maindiv 是Pagination的父容器 */position: relative;height: 580px; /* 或者其他高度以确保Pagination下方有足够空间 */}.pagination-container {position: absolute; /* 固定位置 */bottom: 10px; /* 距离底部10像素 */right: 10px; /* 距离右侧10像素 */}
</style>

三、完整代码

 <template><div class="maindiv"><el-row><el-col :span="6" v-for="(item, index) in currentPageData" :key="index" style="padding: 3px;"><el-card  :body-style="{ padding: '0px' }"><img v-if="item.image" :src="item.image" class="image"><div style="padding: 14px;"><span>{{ item.title }}</span><div class="bottom clearfix"><time class="time">{{ item.time }}</time><el-button type="text" class="button">操作按钮</el-button></div></div></el-card></el-col></el-row><!--添加Pagination组件--><div class="pagination-container"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[4, 8, 12]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div>
</template><script>export default {name: "FileView",data() {return {currentPage: 1,pageSize: 8,total: 10,items: [{image:"https://img0.baidu.com/it/u=3558402622,3525872153&fm=253&fmt=auto&app=138&f=JPEG?w=718&h=500",title:"好吃的汉堡",time:"2024-03-25"}// 填充你的数据对象,每个对象包含 'image', 'title', 'time' 属性]};},computed: {currentPageData() {return this.items.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);}},methods: {handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},handleCurrentChange(val) {this.currentPage = val;}}};
</script>
<style scoped>.time {font-size: 13px;color: #999;}.bottom {margin-top: 13px;line-height: 12px;}.button {padding: 0;float: right;}.clearfix:before,.clearfix:after {display: table;content: "";}.clearfix:after {clear: both}.image {width: 100%;display: block;}.maindiv {/* 确保.maindiv 是Pagination的父容器 */position: relative;height: 580px; /* 或者其他高度以确保Pagination下方有足够空间 */}.pagination-container {position: absolute; /* 固定位置 */bottom: 10px; /* 距离底部10像素 */right: 10px; /* 距离右侧10像素 */}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/590095.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

酷开科技智慧AI让酷开系统大显身手!

时代的浪潮汹涌而至&#xff0c;人工智能作为技术革新和产业变革的重要引擎&#xff0c;正深刻地影响着各行各业。在科技的海洋中&#xff0c;AI技术正逐渐渗透到我们的日常生活中&#xff0c;为我们带来前所未有的便捷和智慧。酷开科技用技术探索智慧AI&#xff0c;别看它只是…

企业家见识、智慧与胸怀:超越知识、聪明与财富的核心价值​

一、引言 在商界的风云变幻中&#xff0c;企业家们不仅需要拥有丰富的知识和聪明才智&#xff0c;更需要具备远见卓识、深刻智慧和博大胸怀。正如某知名企业家所言&#xff1a;“企业家见识比知识重要&#xff0c;智慧比聪明重要&#xff0c;胸怀比财富重要。”&#xff0c;这…

从零开始:Flutter应用上架iOS的完整流程解析

引言 &#x1f680; Flutter作为一种跨平台的移动应用程序开发框架&#xff0c;为开发者提供了便利&#xff0c;使他们能够通过单一的代码库构建出高性能、高保真度的应用程序&#xff0c;同时支持Android和iOS两个平台。然而&#xff0c;完成Flutter应用程序的开发只是第一步…

Spring Boot--文件上传和下载

文件上传和下载 前言文件上传1、以MultipartFile 接口流文件&#xff0c;流的名称需要和前台传过来的名称对应上2、获取到文件名称截取后缀3、为了放置文件名重复使用uuid来随机生成id后缀4、判断转存路径中是否有这个文件夹如果没有就创建5、将文件存储到转存的目录中 文件下载…

python的垃圾回收

引用计数器为主&#xff0c;标记清除和分代回收为辅 1 引用计数器 在python程序运行时&#xff0c;会根据数据类型的不同找到其对应的结构体&#xff0c;根据结构体中的字段来进行创建相关的数据&#xff0c;然后将对象添加到refchain双像链表中&#xff0c;每个对象中的ob_re…

线上研讨会 | 应对汽车毫米波雷达设计中的电磁挑战

智能汽车、新能源汽车最近几年一直是汽车行业关注的热点&#xff0c;随着5G技术越来越普及&#xff0c;汽车智能化发展将越来越迅速。从传统汽车到智能汽车&#xff0c;不是简单功能的增强&#xff0c;而是从单一功能的交通工具变成可移动的办公和娱乐空间&#xff0c;成为物联…

概率论经典题目-二维随机变量及分布--由概率密度求分布函数和概率

解答&#xff1a; 由概率密度函数求解分布函数的公式可知&#xff1a; 辅助图形加以确定积分上下限

CSS - 你知道都有哪些方案可以隐藏一个元素吗

难度级别&#xff1a;初级及以上 提问概率&#xff1a;70% 在前端开发中&#xff0c;隐藏元素并不是一个陌生的话题。根据业务场景不同&#xff0c;实现方案也多种多样&#xff0c;在面试中&#xff0c;应该尽可能多的描述自己遇到过的场景&…

【ElasticSearch】分词器(ElasticSearchIK分词器)

文章目录 1. 分词器介绍2. ik 分词器安装3. 分词器的使用 1. 分词器介绍 •IKAnalyzer 是一个开源的&#xff0c;基于java语言开发的轻量级的中文分词工具包•是一个基于Maven构建的项目•具有60万字/秒的高速处理能力•支持用户词典扩展定义 2. ik 分词器安装 IK 分词器安装…

浅谈分布式光伏电站的运维管理

摘要&#xff1a;随着近些年我国对节能降耗关注力度的持续加大&#xff0c;为满足人们不断增长的电能需求&#xff0c;光伏发电产业得到迅猛发展&#xff0c;其中分布式光伏发电的比重持续增长。在打赢脱贫攻坚战的大背景下&#xff0c;国家电网公司探索出一条“阳光扶贫”的扶…

vue实现导出列表为xlsx文件

1.安装依赖 npm install --save xlsx file-saver 2.引入依赖 import FileSaver from file-saver; import * as XLSX from xlsx; 3.代码实现 <el-button type"primary" click"exportData">导出数据</el-button><el-tableid"table_ex…

IoT数采平台4:测试

IoT数采平台1&#xff1a;开篇IoT数采平台2&#xff1a;文档IoT数采平台3&#xff1a;功能IoT数采平台4&#xff1a;测试 Modbus RTU串口测试 OPC测试 HTTP测试 MQTT透传测试 MQTT网关测试及数据上报 TCP / UDP 监听&#xff0c;客户端连上后发送信息&#xff0c;客户端上报数据…