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

系列文章目录

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

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

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

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


文章目录


前言

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


一、实现效果

在该网页的右下角固定位置

二、实现步骤

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

1.添加Pagination组件

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

javascript 复制代码
 <!--添加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样式代码

在你的样式文件中(例如

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

三、完整代码

javascript 复制代码
 <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>
相关推荐
不想有bug的小菜鸟6 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238637 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559608 分钟前
前端代理,解决跨域问题讲解
前端
quitv13 分钟前
react脚手架配置别名
前端·javascript·react.js
嘵奇14 分钟前
Node.js二:第一个Node.js应用
node.js
m0_5287238122 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星23 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-43 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http