vue.js中用iview框架的page组件实现简单的分页

本文链接：https://blog.csdn.net/weixin_41997724/article/details/85258662

1、首先去iview官网安装iview的框架（我是通过CDN直接引入）：

    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

2、引入iview自带组件：

<Page :total=“dataCount” :page-size=“pageSize” show-total @on-change=“changepage”>

api（官网是有的）如下图所示：

分页API

3、data里面初始化：

 data: {
            list:[],  //接口获取的总数据
            dataCount:"", // 总数据的条目
            pageSize:3,     // 每页显示多少条
            historyData:''  //展示的数据 
        },

3、获取接口遍历数据：

            methods:{
            agency:function () {
                let self=this;   //申明个this对象
                let url ='./js/agency.json'; //本地模拟的数据
                $.ajax({ url: url, dataType: "json",
                    success: function(res){
                        self.dataCount = res.length; //接口返回数据的总条目数
                        self.list=res;   //接口返回的总数据
                        //    console.log(self.list)
                        if(self.dataCount < self.pageSize){   //如果数据的总条目数小于每页显示的条目数就赋值，否则就提取总数据的第三条
                            self.historyData   = self.list
                            //console.log(self.historyData)
                        }else{
                            self.historyData = self.list.slice(0,self.pageSize);
                            //   console.log(self.historyData)
                        }
                    },
                    error: function(res){
                        console.log("读取失败!");
                    }
                });
            }       
        }

4、写翻页事件：

    //页数变化的时候改变每一页的内容
            changepage(index){
                let self = this
                let _start = ( index- 1 ) * self.pageSize;
                let _end = index* self.pageSize;
                self.historyData = self.list.slice(_start,_end);
            }

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .inner{
            position: relative;
            padding-left: 110px;
            height: 30px;
            line-height: 30px;
            font-size: 15px;
            border-bottom: 1px dashed #cce5ff;
        }
        .inner span{
            border-right: 1px solid #e0e0e0;
            display: inline-block;
            width: 10px;
            height: 12px;
            padding-left: 15px;
        }
        .item-name {
            position: absolute;
            left: 0;
            width: 130px;/*110*/
            top: 0;
            bottom: 0;
            text-align: right;
            color: #323232;

        }
        .item-value {
            color: #646464;
            padding-left:35px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in historyData">
                <div>
                    <div class="inner">
                        <div class="item-name">任务流水号<span></span> </div>
                        <div class="item-value">{{item.flowLogicId}}</div>
                    </div>
                    <div class="inner">
                        <div class="item-name">任务类型<span></span> </div>
                        <div class="item-value">{{item.flowType}}</div>
                    </div>
                    <div class="inner">
                        <div class="item-name">任务名称<span></span> </div>
                        <div class="item-value">{{item.flowName}}</div>
                    </div>
                    <div class="inner">
                        <div class="item-name">任务发起人<span></span> </div>
                        <div class="item-value">{{item.flowCRyxm}}</div>
                    </div>
                    <div class="inner">
                        <div class="item-name">任务发起时间<span></span> </div>
                        <div class="item-value">{{item.flowCTime}}</div>
                    </div>
                    <div class="inner">
                        <div class="item-name">当前环节<span></span> </div>
                        <div class="item-value">{{item.nodeName}}</div>
                    </div>
                    <div class="inner">
                        <div class="item-name">当前环节处理人<span></span> </div>
                        <div class="item-value">{{item.enableRyxms}}</div>
                    </div>
                </div>
        </li>
    </ul>
    <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changepage"></Page>
</div>
<script>
 var vm = new Vue({
        el: '#app',
        data: {
            list:[],  //接口获取的总数据
            dataCount:"", // 总数据的条目
            pageSize:3,     // 每页显示多少条
            historyData:''  //展示的数据

        },
        created:function(){
            this.agency();
            this.changepage();
        },
        methods:{
            agency:function () {
                let self=this;   //申明个this对象
                let url ='./js/agency.json'; //本地模拟的数据
                $.ajax({ url: url, dataType: "json",
                    success: function(res){
                        self.dataCount = res.length; //接口返回数据的总条目数
                        self.list=res;   //接口返回的总数据
                        //    console.log(self.list)
                        if(self.dataCount < self.pageSize){   //如果数据的总条目数小于每页显示的条目数就赋值，否则就提取总数据的第三条
                            self.historyData   = self.list
                            //console.log(self.historyData)
                        }else{
                            self.historyData = self.list.slice(0,self.pageSize);
                            //   console.log(self.historyData)
                        }
                    },
                    error: function(res){
                        console.log("读取失败!");
                    }
                });
            },
            //页数变化的时候改变每一页的内容
            changepage(index){
                let self = this
                let _start = ( index - 1 ) * self.pageSize;
                let _end = index * self.pageSize;
                self.historyData = self.list.slice(_start,_end);
            }
        }
    })
</script>
</body>
</html>