VUE实现的一个简单分页表格

2019独角兽企业重金招聘Python工程师标准>>>

用VUE实现的一个分页。

var myMsgTable = new Vue({
        el: '#myMsgTable',
        data: {
            list: [],
            total: 0,
            pageSize: 20,
            page: 1,
            rows: 0
        },
        computed: {
            totalPage: function () {
                if (this.total == 0) {
                    return 1;
                }
                return parseInt((this.total + this.pageSize - 1) / this.pageSize);
            },
            offset: function () {
                return (this.page - 1) * this.pageSize;
            },
            limit: function () {
                return this.pageSize;
            },
            isFirstPage: function () {
                return this.page == 1;
            },
            isLastPage: function () {
                return this.page === this.totalPage;
            }
        },
        methods: {
            nextPage: function () {
                if (this.page < this.totalPage) {
                    this.page++;
                    this.loadPage();
                }
            },
            prevPage: function () {
                if (this.page > 1) {
                    this.page--;
                    this.loadPage();
                }
            },
            goPage: function (page) {
                if (this.page == page) {
                    return;
                }
                this.page = page;
                this.loadPage();
            },
            loadPage: function () {
                var _this = this;
                $.post('/data.json', {
                    offset: this.offset,
                    limit: this.pageSize
                }, function (data) {
                    _this.$set("list", data.rows);
                    _this.$set("total", data.total);
                });
            }
        }
    });

下面是表格：

<table id='myMsgTable'>
                            <tr>
                                <th>标题</th>
                                <th width="573">消息内容</th>
                                <th>消息时间</th>
                            </tr>
                            <tr v-for="p in list" v-bind:class="{'b1':$index%2}">
                                <td>{{p.readStatus==2?'':'[未读]'}}{{p.title}}</td>
                                <td>{{p.content}}</td>
                                <td>{{p.sendTime | date 'YYYY-MM-DD HH:mm'}}</td>
                            </tr>
                            <tr>
                                <td colspan=" 4">
                                    <div class="commonPage" style="margin:0">
                                        <span><a href="#" v-on:click="goPage(1)">首页</a></span>
                                        <span><a href="#" v-on:click="prevPage"
                                                 v-bind:disabled="isFirstPage">上一页</a></span>
                                        <span><a href="#" v-on:click="nextPage" v-bind:disabled="isLastPage">下一页</a></span>
                                        <span><a href="#" v-on:click="goPage(this.totalPage)">末页</a></span>
                                        <span>共{{total}}条记录</span>
                                        <span>共{{totalPage}}页</span>
                                        <span>跳转到</span>
                                        <select v-on:change="goPage(this.page)" v-model="page">
                                            <option value="{{n+1}}" v-for="n in totalPage">{{n+1}}</option>
                                        </select>
                                        <span>页</span>
                                    </div>
                                </td>
                            </tr>
                        </table>

tips：

本文由wp2Blog导入，原文链接：http://devonios.com/vue-table-paginate.html

转载于:https://my.oschina.net/yangyan/blog/859406