vuejs 分页组件

qq_30812457

已于 2022-02-18 08:38:03 修改

阅读量417

点赞数

文章标签： vue.js javascript 前端 html

于 2022-02-14 15:32:16 首次发布

本文链接：https://blog.csdn.net/qq_30812457/article/details/122925559

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="/Scripts/jquery-1.8.0.js"></script>
    <style type="text/css">
        ul.page > li {
            list-style: none;
            display: inline;
        }

            ul.page > li > a, ul.page > li > span {
                padding: 6px 12px;
                margin-left: -1px;
                line-height: 1.42857143;
                color: #337ab7;
                text-decoration: none;
                background-color: #fff;
                border: 1px solid #ddd;
            }

            ul.page > li > a {
                cursor: pointer;
            }

                ul.page > li > a.active, ul.page > li > span.active {
                    color: #fff;
                    cursor: default;
                    background-color: #337ab7;
                    border-color: #337ab7;
                }

                ul.page > li > a[disabled] {
                    color: #777;
                    cursor: not-allowed;
                    background-color: #fff;
                    border-color: #ddd;
                }

                ul.page > li > span.CustomInfo {
                    color: black;
                }
    </style>
</head>
<body>
    <div id="app">
        <!--加上.sync 为双向传递  :page-Count.sync="pageCount"-->
        <vue-pagination :page-Count="pageInfo.pageCount" :total-Count="pageInfo.entityCount" v-on:pagechange="pageChange"></vue-pagination>
        {{pageInfo}}
    </div>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript">

        //翻页组件开始
        Vue.component('vue-pagination', {
            data: function () {
                return {
                    pageCurrent: 1,
                    pageGroup: 10
                }
            },
            props: {
                pageCount: {
                    type: Number,
                    default: 0
                },
                totalCount: {
                    type: Number,
                    default: 0
                }
            },
            template: '<ul class="page">'
                + '<li><a v-on:click="pageChange(1)" :disabled="pageCurrent>1?null:\'disabled\'">首页</a></li>'
                + '<li><a v-on:click="pageChange(pageCurrent-1)" :disabled="pageCurrent>1?null:\'disabled\'">上一页</a></li >'
                + '<li v-for="item in indexs"><a v-on:click="pageChange(item.val)" :class="{active:item.active}">{{ item.text }}</a></li >'
                + '<li><a v-on:click="pageChange(pageCurrent+1)" :disabled="pageCurrent<pageCount?null:\'disabled\'">下一页</a></li >'
                + '<li><a v-on:click="pageChange(pageCount)" :disabled="pageCurrent<pageCount?null:\'disabled\'">尾页</a></li>'
                + '<li><span class="CustomInfo">第 {{ pageCurrent }} 页 共 {{ pageCount }} 页 共 {{ totalCount }} 条记录</span></li>'
                + '</ul>',
            methods: {
                // 页码点击事件
                pageChange: function (pageNo) {
                    if (pageNo != this.pageCurrent && pageNo > 0 && pageNo <= this.pageCount) {
                        this.pageCurrent = pageNo;
                        this.$emit('pagechange', this.pageCurrent)
                    }
                }
            },
            computed: {
                indexs() {
                    var eIndex = parseInt((this.pageCurrent + (this.pageGroup - 1)) / this.pageGroup) * this.pageGroup;
                    var sIndex = eIndex - (this.pageGroup - 1);
                    eIndex = eIndex > this.pageCount ? this.pageCount : eIndex;
                    var indexArr = new Array();

                    if (eIndex > this.pageGroup) {
                        indexArr.push({ val: eIndex - 1, active: false, text: '...' });
                    }
                    for (var i = sIndex; i <= eIndex; i++) {
                        indexArr.push({ val: i, active: i == this.pageCurrent, text: i });
                    }
                    if (eIndex < this.pageCount) {
                        indexArr.push({ val: eIndex + 1, active: false, text: '...' });
                    }
                    return indexArr;
                }
            }
        })
        //翻页组件结束

        var app = new Vue({
            el: '#app',
            data() {
                return {
                    pageInfo: {},
                    pageSize: 15
                }
            },
            mounted() {
                this.pageChange(1);//首次加载第一页                
            },
            methods: {
                pageChange: function (pageNo) {
                    //翻页会触发此事件
                    axios({
                        url: "TabPannel.aspx/GetPageList",
                        method: "post",
                        headers: {
                            'Content-Type': 'application/json; charset=utf-8'
                        },
                        data: {
                            pageNo: pageNo,
                            pageSize: this.pageSize
                        }
                    }).then(response => (this.pageInfo = response.data.d)).
                        then((response) => {
                            //console.log(response);
                        }).catch((error) => { // 请求失败处理
                            console.log(error);
                        });
                }
            }
        })      
    </script>

</body>
</html>