没有合适的资源?快使用搜索试试~ 我知道了~
使用Bootstrap4 + Vue2实现分页查询的示例代码
1 下载量 118 浏览量
2020-11-27
17:50:33
上传
评论
收藏 193KB PDF 举报
温馨提示
试读
3页
写在前面 工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理。后台为Java Web工程,使用Tomcat部署服务。 前端框架:Bootstrap4,Vue.js2 后台框架:spring boot,spring data JPA 开发工具:IntelliJ IDEA,Maven 实现效果: 会员信息 如何使用Bootstrap+Vue来实现动态table,数据的新增删除等操作,请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除 。交代完毕,本文主题开始。 一、使用Bootstrap搭建表格 表格区 <div class
资源推荐
资源详情
资源评论
使用使用Bootstrap4 + Vue2实现分页查询的示例代码实现分页查询的示例代码
写在前面写在前面
工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理。后台为Java Web工程,使用Tomcat部署服务。
前端框架:Bootstrap4,Vue.js2
后台框架:spring boot,spring data JPA
开发工具:IntelliJ IDEA,Maven
实现效果:实现效果:
会员信息
如何使用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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-backward" @click="switchToPage(0)"> </i></a>
</li>
<li class="page-item">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="switchToPage(n-1)" class="page-link">{{n}}</a>
</li>
<li class="page-item">
资源评论
weixin_38548817
- 粉丝: 3
- 资源: 917
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- STM32单片机FPGA毕设电路原理论文报告一种具有传统中医针刺补泻手法的新型智能电针仪设计
- 2023-04-06-项目笔记 - 第七十七阶段 - 4.4.2.75全局变量的作用域-75 -2024.03.19
- VuforiaObjectScanner-8-3-8.apk.1.1.1
- 上下班打卡_日报_20240201-20240319.xlsx
- 创业天下3.5.500.apk
- POD-data.mat
- ZF逆变器课程电子档及源码
- FileZilla-3.66.5-win64-sponsored2-setup
- SourceTreeSetup-3.4.17
- Docker Desktop Installer
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功