http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 6074|回复: 5

[vue.js] vue.js分页+加载前后效果处理经典例子

[复制链接]
发表于 2018-12-26 11:28:51 | 显示全部楼层 |阅读模式
关于分页,这个里我们直接重置一下v-for的indexs,就是循环的结束值。因为v-for没有很好的办法设置步长以及怎么设置初始值

看代码

[JavaScript] 纯文本查看 复制代码
 computed: {
indexs: function () {
//开始页
var left = 1;
//结束页
var right = this.pageCount;
//在显示的页码数组
var ar = [];
if (this.pageCount >= 10) {
if (this.pageIndex > 6 && this.pageIndex < this.pageCount - 4) {
left = this.pageIndex - 5
right = this.pageIndex + 4
} else {
if (this.pageIndex <= 6) {
left = 1
right = 10
} else {
right = this.pageCount
left = this.pageCount - 8
}
}
}
while (left <= right) {
ar.push(left)
left++
}
return ar
}
}

直接复制到你的vue对象中,然后配置一下
pageCount总页数
pageIndex当前页就行了。

控制数据是否显示,这里直接用一个隐藏的行来处理
html部分
[HTML] 纯文本查看 复制代码
 <tr id="msg" style="display:none;" ></tr>

默认不显示
js控制如下,加载中,,,
[JavaScript] 纯文本查看 复制代码
 $("#msg").html(" <td align='center' colspan='4'>数据加载中...</td>");
$("#msg").show();


没有数据时

[JavaScript] 纯文本查看 复制代码
 rw.userlogs ="";
$("#msg").html("<td align='center' colspan='4'>未查询到数据...</td>");


出错时
[JavaScript] 纯文本查看 复制代码
 $("#msg").html("<td align='center' colspan='4'>出现异常,请联系管理员!!!</td>");

全部JS部分
[JavaScript] 纯文本查看 复制代码
 <script type="text/javascript">
var rw = new Vue({
el: "#grid",
data: {
pageIndex: 1, //当前页 
pageCount: 0, //总页数
totalcount: 0, //总行数
username: "", //
userlogs: ""//用户列表集合
},
methods: {
getdata: function (n) {

rw.pageCount = 0;
rw.totalcount = 0;
rw.pageIndex = 0;
rw.userlogs = "";
$("#msg").html(" <td align='center' colspan='4'>数据加载中...</td>");
$("#msg").show();

axios({
method: 'get',
url: "/System/Crm_User_logs.aspx?action=getpagelist&username=" + this.username + "&pageIndex=" + n
}).then(function (res) {
var data = res.data;
if (data.reCode > 0) {
$("#msg").hide();
rw.pageCount = Math.ceil(data.TotalCount / data.pageSize);
rw.totalcount = data.TotalCount;
rw.username = data.username;
rw.pageIndex = data.pageIndex;
rw.userlogs = data.info;
} else {
$("#msg").html("<td align='center' colspan='4'>未查询到数据...</td>");
}
}).catch(function(err){
$("#msg").html("<td align='center' colspan='4'>出现异常,请联系管理员!!!</td>");
});
}
},
computed: {
indexs: function () {
//开始页
var left = 1;
//结束页
var right = this.pageCount;
//在显示的页码数组
var ar = [];
if (this.pageCount >= 10) {
if (this.pageIndex > 6 && this.pageIndex < this.pageCount - 4) {
left = this.pageIndex - 5
right = this.pageIndex + 4
} else {
if (this.pageIndex <= 6) {
left = 1
right = 10
} else {
right = this.pageCount
left = this.pageCount - 8
}
}
}
while (left <= right) {
ar.push(left)
left++
}
return ar
}
}
});
</script>


全部代码

[HTML] 纯文本查看 复制代码
<style>
.form-control
{
float: right;
}
.si-form
{
padding-top: 10px;
margin: 0 3px 3px 3px;
}
.tractive
{
background-color: rgb(240, 248, 255);
}
.acursor
{
cursor:pointer;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
<div class="si-main">
<div class="si-block">
<div class="si-form" id="grid">
<table class="table table-form">
<tr>
<td colspan="3">
<div class="form-control-wrap">
<label class="form-label">
用户名:</label>
<input class="form-control ml1" v-model="username" @keyup.enter="getdata(1)"/>
</div>
<button class="btn btn-primary" v-on:click="getdata(1)">
搜索</button>
</td>
</tr>
</table>
<%--分页列表--%>
<table class="table table-page">
<thead>
<tr>
<td align="center">
用户名
</td>
<td align="center">
登录时间
</td>
<td align="center">
登录IP
</td>
<td align="center">
useragent
</td>
</tr>
</thead>
<tbody>
<tr v-for="(info,index) in userlogs" :class="{'tractive':index%2!=0}">
<td align="center">
{{ info.User_name}}
</td>
<td align="center">
{{ info.StrUser_createdate}}
</td>
<td align="center">
{{ info.User_ip}}
</td>
<td align="center">
{{ info.User_useragent}}
</td>
</tr>
<tr id="msg" style="display:none;" ></tr>
</tbody>
<tfoot>
<tr>
<td colspan="11">
<div class="pagination-wrap">
<div class="count">
<div>
总页数 {{ pageCount}}    总记录数 {{ totalcount}}
</div>
</div>
<ul class="pagination" v-if="pageCount > 1">
<li v-if="pageIndex>1"><a class="acursor" href="javascripit:void(0)" v-on:click="getdata(1)">
首页</a></li>
<li v-if="pageIndex>1"><a class="acursor" v-on:click="pageIndex--,getdata(pageIndex)">
上一页</a></li>
<li v-for="n in indexs" v-bind:class="pageIndex === n ? 'cur':''"><a class="acursor"
v-on:click="getdata(n)">{{ n }}</a> </li>
<li v-if="pageIndex!=pageCount"><a class="acursor" v-on:click="pageIndex++,getdata(pageIndex)">
下一页</a></li>
<li v-if="pageIndex!=pageCount"><a class="acursor" v-on:click="getdata(pageCount)">
尾页</a></li>
</ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="js" runat="server">
<script type="text/javascript">
var rw = new Vue({
el: "#grid",
data: {
pageIndex: 1, //当前页 
pageCount: 0, //总页数
totalcount: 0, //总行数
username: "", //
userlogs: ""//用户列表集合
},
methods: {
getdata: function (n) {

rw.pageCount = 0;
rw.totalcount = 0;
rw.pageIndex = 0;
rw.userlogs = "";
$("#msg").html(" <td align='center' colspan='4'>数据加载中...</td>");
$("#msg").show();

axios({
method: 'get',
url: "/System/Crm_User_logs.aspx?action=getpagelist&username=" + this.username + "&pageIndex=" + n
}).then(function (res) {
var data = res.data;
if (data.reCode > 0) {
$("#msg").hide();
rw.pageCount = Math.ceil(data.TotalCount / data.pageSize);
rw.totalcount = data.TotalCount;
rw.username = data.username;
rw.pageIndex = data.pageIndex;
rw.userlogs = data.info;
} else {
$("#msg").html("<td align='center' colspan='4'>未查询到数据...</td>");
}
}).catch(function(err){
$("#msg").html("<td align='center' colspan='4'>出现异常,请联系管理员!!!</td>");
});
}
},
computed: {
indexs: function () {
//开始页
var left = 1;
//结束页
var right = this.pageCount;
//在显示的页码数组
var ar = [];
if (this.pageCount >= 10) {
if (this.pageIndex > 6 && this.pageIndex < this.pageCount - 4) {
left = this.pageIndex - 5
right = this.pageIndex + 4
} else {
if (this.pageIndex <= 6) {
left = 1
right = 10
} else {
right = this.pageCount
left = this.pageCount - 8
}
}
}
while (left <= right) {
ar.push(left)
left++
}
return ar
}
}
});
</script>




1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-12-26 11:29:46 | 显示全部楼层
数据行只需要把vue绑定的数据列重置为“”自动就不显示标签了,不需要再处理sho或者hide方法
发表于 2018-12-26 16:36:36 | 显示全部楼层
我只是路过打酱油的。
发表于 2018-12-27 09:40:01 | 显示全部楼层
强烈支持楼主ing……
发表于 2018-12-27 09:41:29 | 显示全部楼层
强烈支持楼主ing……
发表于 2018-12-29 21:00:34 | 显示全部楼层
强烈支持楼主ing……
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 08:39

© 2014-2021

快速回复 返回顶部 返回列表