[聚合文章] 使用Bootstrap4 + Vue2实现分页查询

  1. 首页
  2. 聚合文章
  3. 文章详情
CSS 2017-12-19 26 阅读
原文链接: http://www.jianshu.com/p/06ae69d02960
会员信息
会员信息

如何使用Bootstrap+Vue来实现动态table，数据的新增删除等操作，请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除。交代完毕，本文主题开始。

一、使用Bootstrap搭建表格

  • 表格区
    <div class="row">            <table class="table table-hover table-striped table-bordered table-sm">                <thead class="">                <tr>                    <th><input type="checkbox"></th>                    <th>序号</th>                    <th>会员号</th>                    <th>姓名</th>                    <th>手机号</th>                    <th>办公电话</th>                    <th>邮箱地址</th>                    <th>状态</th>                </tr>                </thead>                <tbody>                <tr v-for="(user,index) in userList">                    <td><input type="checkbox" :value="index" v-model="checkedRows"></td>                    <td>{{pageNow*10 + index+1}}</td>                    <td>{{user.id}}</td>                    <td>{{user.username}}</td>                    <td>{{user.mobile}}</td>                    <td>{{user.officetel}}</td>                    <td>{{user.email}}</td>                    <td v-if="user.disenable == 0">正常</td>                    <td v-else>注销</td>                </tr>                </tbody>            </table>        </div>
  • 分页区
    <div class="row mx-auto">            <ul class="nav justify-content-center pagination-sm">                <li class="page-item">                    <a href="#" class="page-link"><i class="fa fa-fast-backward" @click="switchToPage(0)">&nbsp;</i></a>                </li>                <li class="page-item">                    <a href="#" class="page-link"><i class="fa fa-backward" @click="switchToPage(pageNow-1)"></i></a>                </li>                <li class="page-item" v-for="n in totalPages" :class="{active:n==pageNow+1}">                    <a href="#" @click="switchToPage(n-1)" class="page-link">{{n}}</a>                </li>                <li class="page-item">                    <a href="#" class="page-link"><i class="fa fa-forward" @click="switchToPage(pageNow+1)"></i></a>                </li>                <li class="page-item">                    <a href="#" class="page-link"><i class="fa fa-fast-forward" @click="switchToPage(totalPages-1)"></i></a>                </li>            </ul>        </div>

二、初始化Vue对象及数据

  • 创建Vue对象
var vueApp = new Vue({        el:"#vueApp",        data:{            userList:[],            perPage:10,            pageNow:0,            totalPages:0,            checkedRows:[]        },        methods:{            switchToPage:function (pageNo) {                if (pageNo < 0 || pageNo >= this.totalPages){                    return false;                }                getUserByPage(pageNo);            }
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。