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 form 表单提交+ajax异步请求+分页效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-
-
Vue.js实现一个自定义分页组件vue-paginaiton
vue实现一个分页组件vue-paginaiton vue使用了一段时间的感触就是,我再也不想直接操作DOM了.数据绑定式的编程体验真是好.实现的一个分页组件. 这里的css就不放出来了,可以看直接去github上下载:vue-pagination 先上一张实例图吧 模版 <div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on:click="cur-
-
Vue 固定头 固定列 点击表头可排序的表格组件
原理是将原table的指定行,指定列clone一份放在其上 实现代码如下: <template> <div> <div id="divBox1" :style="{height:height}"> <table id="tbTest1" cellpadding="0" cellspacing="0" style="text-align:center;bac
-
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-
-
Vue.js bootstrap前端实现分页和排序
写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 效
-
VUEJS实战之利用laypage插件实现分页（3）
前言 在上两章的工作中,我们顺利的实现了首页的渲染,但是,只是渲染了一页数据而已.我们可能需要渲染更多的数据,这时候,我们就有必要考虑分页了. 分页有很多种方式,比如异步加载的分页方式.然而对于没有太多使用前端模版框架的朋友来说,一上来就使用这种方式,可能稍微有点难度.因此,我们这章的分页实现,是基于普通的链接分页的方式完成的. 在我们有了更多的前端框架的使用经验之后,我们可以使用更加丰富的分页方法. 事实上,我们自己构建一个分页组件也不是不可以,在移动端我都是自己的代码实现的.但是,我这里要推
-
使用vue.js制作分页组件
学习了vue.js一段时间,拿它来做2个小组件,练习一下. 我这边是用webpack进行打包,也算熟悉一下它的运用. 源码放在文末的 github 地址上. 首先是index.html <!DOCTYPE html> <html> <head> <title>Page</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'O
-
vue.js表格分页示例
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
-
基于Vue如何封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se
-
基于Vue.js的表格分页组件
一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
-
vuejs2.0实现一个简单的分页示例
最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂,没耐心看自己动手写了一个. 用js实现的分页结果如图所示: css .page-bar{ margin:40px; } ul,li{ margin: 0px; padding: 0px; } li{ list-style: none } .page-bar li:first-child>a { margin-left: 0px } .page-bar a{ border: 1px solid #dd
-
vue.js 表格分页ajax 异步加载数据
Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f
-
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条
-
vue分页组件table-pagebar使用实例解析
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or