vue.js框架实现表单排序和分页效果
更新时间：2017年08月09日 14:15:05 作者：涉水的小菜叽
这篇文章主要为大家详细介绍了vue.js框架实现表单排序和分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue.js实现表单排序和分页的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../lib/vue.min.js" type="text/javascript"></script>
<title>表格组件</title>
</head>
<body>
<div id="app">
<mydiv v-bind:info="info" v-bind:header="header" v-bind:num="num" v-bind:page="page"></mydiv>
</div>
<script type="text/x-template" id="mysc">
<div>
<table>
<tr>
<th v-for='x in header' v-on:click="bit(x)">{{x.key}}</th>
</tr>
<tr v-for="y in fenye">
<th v-for="x in header">{{y[x.name]}}</th>
</tr>
</table>
<button v-on:click="lastPage">上一页</button>
<button v-on:click="nextPage">下一页</button>
</div>
</script>
<script type="text/javascript">
Vue.component('mydiv',{
template:'#mysc',
props:{
/*属性不能用驼峰命名法*/
info:Array,
header:Array,
num:Number,
page:Number,
boolen:Boolean,
tiaojian:String
},
data: function() {
return {}
},
computed:{
fenye:function(){
/*排序*/
var list=this.info;
var paixu=this.tiaojian;
for(var i = 1;i<list.length;i++){
for(var j=0;j<list.length-i;j++){
if(this.boolen){
if(list[j][paixu]>list[j+1][paixu]){
var k=list[j+1];
list[j+1]=list[j];
list[j]=k;
}
}else{
if(list[j][paixu] < list[j + 1][paixu]) {
var k;
k = list[j];
list[j] = list[j + 1];
list[j + 1] = k;
}
}
}
}
/*分页*/
var list2 = [];
var start= this.num*(this.page-1);
var end=start+this.num;
if(end<list.length){
for(var i =start;i<end;i++){
list2.push(list[i])
}
}else{
for(var i =start;i<list.length;i++){
list2.push(list[i])
}
}
return list2;
}
},
methods:{
bit:function(x){
this.boolen=!this.boolen;
this.tiaojian=x.name;
},
lastPage:function(){
console.log(this.num)
if(this.page > 1) {
this.page = this.page - 1;
}
},
nextPage: function() {
var pageNum = this.info.length / this.num;
if(this.page < pageNum) {
this.page = this.page + 1;
}
}
}
})
var phone=new Vue({
el:'#app',
data:{
boolen:true,
num:5,
page:1,
info:[],
header:[{
key: '名称',
name:'name'
}, {
key: '价格',
name:'price'
}, {
key: '数量',
name:'num'
}]
}
})
for(var i = 0;i<22;i++){
phone.info.push({
name:'手机'+i,
num:i,
price:100*i
})
console.log(111)
}
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中按钮操作完刷新页面的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
基于electron+vue3+ts搭建桌面端应用并且可以热更新
这篇文章主要为大家详细介绍了如何基于electron+vue3+ts搭建桌面端应用并且可以热更新,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下2023-10-10
这篇文章主要介绍了vue自适应布局（各种浏览器，分辨率）,主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式，开局设置overflow:hidden，主体main部分要设置：overflow:auto，需要的朋友可以参考下2022-09-09
看到好多开源项目都升级了vue3,下面这篇文章主要给大家介绍了关于Vue2项目升级到Vue3的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue router 用户登陆功能的实例代码,主要用到H5中的会话存储（sessionStorage）、vue-router路由前置操作、路由元信息(meta)等知识点，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Vue实现验证码输入交互的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了web前端vue实现插值文本和输出原始html，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue中css如何使用data中的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在vue中获取wangeditor的html和text的操作
这篇文章主要介绍了在vue中获取wangeditor的html和text的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家详细介绍了vue实现鼠标悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论