文档章节

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

小杨阿哥哥
 小杨阿哥哥
发布于 2017/03/15 12:36
字数 324
阅读 35
收藏 0

用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

© 著作权归作者所有

共有 人打赏支持
小杨阿哥哥
粉丝 68
博文 482
码字总数 287109
作品 0
西安
后端工程师
私信 提问
Vue element表格分页数据加载示例

一、element ui表格分页数据加载示例 1.视图 2. js 显示结果: 二、后台接口代码 更多: Vue element 表格获取选中项操作 Vue element 二级菜单绑定示例 Vue中路由管理器Vue Router使用介绍(...

tianma3798
2018/10/18
0
0
Vue Theme主题样式整理

一、官方主题在线生成预览 https://elementui.github.io/theme-chalk-preview/#/zh-CN 使用步骤: 1.选择主题颜色,下载主题 包,然后解压 2.找到node_modules下的element-ui下的主题文件,覆...

tianma3798
2018/10/19
0
0
vscode 中的 vue 格式化(一)

使用 vscode 开发 vue, 必不可少的插件包括 vetur, prettier vetur 提供了下面一系列的功能: Features Syntax-highlighting 高亮 Snippet 代码片段 Emmet 缩写语法 Linting / Error Checki...

tianma3798
2018/10/18
0
0
Vue.js分页组件实现:diVuePagination

完整版下载地址:https://gitee.com/dgx/diVuePagination 完整版演示地址:http://dgx.gitee.io/divuepagination/#/ 一.准备工总 利用vue-cli和webpack如何快速搭建一个项目我们已经有过介绍...

透笔度
2017/10/20
0
1
100行代码实现一个vue分页组件

今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。所有代码的源码可以再github上下载的到:下载地址 先来看一下实现效果: 点击查看效果 整体思路 我们先...

伊泽瑞尔
2018/11/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java单例模式学习记录

在项目开发中经常能遇见的设计模式就是单例模式了,而实现的方式最常见的有两种:饿汉和饱汉(懒汉)。由于日常接触较多而研究的不够深入,导致面试的时候被询问到后有点没底,这里记录一下学习...

JerryLin123
昨天
4
0
VSCODE 无法调试

VSCODE 无法调试 可以运行 可能的原因: GCC 的参数忘了加 -g

shzwork
昨天
5
0
理解去中心化 稳定币 DAI

随着摩根大通推出JPM Coin 稳定币,可以预见稳定币将成为区块链落地的一大助推器。 坦白来讲,对于一个程序员的我来讲(不懂一点专业经济和金融),理解DAI的机制,真的有一点复杂。耐心看完...

Tiny熊
昨天
4
0
5.线程实现

用于线程实现的Python模块 Python线程有时称为轻量级进程,因为线程比进程占用的内存少得多。 线程允许一次执行多个任务。 在Python中,以下两个模块在一个程序中实现线程 - _thread 模块 th...

Eappo_Geng
昨天
7
0
ServiceLoader

创建一个接口文件在resources资源目录下创建META-INF/services文件夹在services文件夹中创建文件,以接口全名命名创建接口实现类 内容me.zzp.ar.d.PostgreSQLDialectme.zzp.ar.d.Hype...

Cobbage
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部