elementui 实现一个固定位置的Pagination（分页）组件

系列文章目录

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

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

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

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

前言

在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>