vue+element+js实现文章管理的分页功能

最新推荐文章于 2024-04-27 22:55:28 发布

高中不复，大学纷飞

最新推荐文章于 2024-04-27 22:55:28 发布

阅读量813

点赞数 1

分类专栏：毕设-旅游网文章标签： html vue js 分页

本文链接：https://blog.csdn.net/qq_44760912/article/details/121448396

版权

毕设-旅游网专栏收录该内容

6 篇文章 3 订阅

订阅专栏

毕设篇：使用vue+element+js实现文章管理的分页功能

效果展示

article page

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>分页展示</title>
    <link rel="stylesheet" href="lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="lib/index.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <style>
        #app {
            margin: 50px 0 0 50px;
            width: 1000px;
            height: 640px;
            /* background: wheat; */
            /* border: 1px solid orange; */
        }
        .content {
            width: 1000px;
            height: 300px;
            margin-bottom: 20px;
            /* background: wheat; */
            /* border: 1px solid orange; */
        }

        .imgleft {
            width: 400px;
            height: 300px;
            /* background: orangered; */
            float: left;
        }

        .artright {
            width: 600px;
            height: 300px;
            /* background: orchid; */
            float: right;
            position: relative;
        }

        .artright h3 {
            position: absolute;
            color: white;
            background: #1566c1;
            width: 150px;
            height: 60px;
            z-index: 999;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 60px;
        }

        .artright p {
            position: absolute;
            display: inline-block;
            width: 600px;
            height: 270px;
            z-index: 100;
            background: #edf0f0;
            padding: 0;
            top: 30px;
            left: 0;
        }
        .artright span {
            display: block;
            color: #727272;
            margin-top: 100px;
        }

        img {
            width: 400px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content" v-for="(item,index) in PageDatas" :key="index">
            <figure class="imgleft">
                <img :src="'img/img'+item.imgc+'.png'" alt="">
            </figure>
            <div class="artright">
                <h3>{{item.hc}}</h3>
                <p><span>{{item.artc}}</span></p>
            </div>
        </div>
        <div class="footer">
            <!-- <button @click="prevPage()" :disabled="currentPage <= 1">
                上一页
            </button>
            <span>第{{currentPage}}页/共{{totalPage}}页</span>
            <button @click="nextPage()" :disabled="currentPage >= totalPage">
                下一页
            </button> -->
            <!-- //这是下拉框可以选择的，每选择一行，要展示多少内容 //显示当前行的条数-->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[2, 4, 6, 12]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalList.length">
            </el-pagination>
        </div>
    </div>

    <script>
        let totalList = [];
        //图片数组、标题数组、内容数组
        let hc = ['北京天坛', '张家界武陵源', '世界之窗', '浯溪碑林',
            '北京天坛', '张家界武陵源', '世界之窗', '浯溪碑林',
            '北京天坛', '张家界武陵源', '世界之窗', '浯溪碑林']
        var name = '这就是'
        let artc = [name + '北京天坛', name + '张家界武陵源', name + '世界之窗', name + '浯溪碑林',
        name + '北京天坛', name + '张家界武陵源', name + '世界之窗', name + '浯溪碑林',
        name + '北京天坛', name + '张家界武陵源', name + '世界之窗', name + '浯溪碑林']
        for (let i = 0; i < 12; i++) {
            totalList.push({
                imgc: i + 1,
                hc: hc[i],
                artc: artc[i]
            });
        }
        // 父组件
        new Vue({
            //
            el: '#app',
            data() {
                return {
                    totalList,//所有数据
                    totalPage: 1,//总共页数，默认为1
                    currentPage: 1, //当前页数 ，默认为1
                    pageSize: 2, // 每页显示数量
                    PageDatas: [] //当前页显示内容
                }
            },
            mounted() {
                //计算一共有几页
                this.totalPage = Math.ceil(this.totalList.length / this.pageSize);
                // 计算得0时设置为1
                this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
                this.setPageDatas();
            },
            methods: {
                // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
                setPageDatas() {
                    let begin = (this.currentPage - 1) * this.pageSize;
                    let end = this.currentPage * this.pageSize;
                    this.PageDatas = this.totalList.slice(
                        begin, end);
                },
                //上一页
                prevPage() {
                    console.log(this.currentPage);
                    if (this.currentPage == 1) return;

                    this.currentPage--;
                    this.setPageDatas();
                },
                // 下一页
                nextPage() {
                    if (this.currentPage == this.totalPage) return;

                    this.currentPage++;
                    this.setPageDatas();

                },
                // 初始页currentPage、初始每页数据数pagesize和数据data
                handleSizeChange: function (size) {
                    this.pageSize = size;
                    console.log(this.pageSize)  //每页下拉显示数据
                    this.setPageDatas();
                },
                handleCurrentChange: function (currentPage) {
                    this.currentPage = currentPage;
                    console.log(this.currentPage)  //点击第几页
                    this.setPageDatas();
                },

            }

        });
    </script>
</body>

</html>

vue的常用方法与生命周期

常用方法	具体描述
created	html加载完成之前，执行。执行顺序：父组件-子组件
mounted	html加载完成后执行。执行顺序：子组件-父组件
methods	事件方法执行
watch	watch是去监听一个值的变化，然后执行相对应的函数
computed	computed是计算属性，也就是依赖其它的属性计算所得出最后的值

element组件 Pagination 分页

具体参考：vue+Element-ui实现分页效果

总结

图片命名格式为：img/imgi.png，其中i是变量

标题和内容都是采用数组的形式写入（后期应该是从本地数据库中导入）

代码具体功能实现参考 vue实现简单的前端分页功能

这里涉及到对应版本的element和vue.js的版本问题，具体参考链接：

这里我的vue版本为 Vue.js v2.6.14
而element本地下载的是官方对应的2.15.7，亲测可用！
大家也可以自己百度对应版本的相关信息，据我所知vue3.0是不能使用element ui的，vue3对应的是element plus，但是只用到vue.js的功能，优先考虑vue2，可以减少学习成本

element ui本地下载版本选2.15.7

高中不复，大学纷飞

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue+element+js实现文章管理的分页功能

毕设篇：使用vue+element+js实现文章管理的分页功能效果展示实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compa
复制链接

扫一扫