vue.js框架实现表单排序和分页效果
程序员文章站
2022-11-25 12:14:52
本文实例为大家分享了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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Angular4学习笔记之新建项目的方法