vue.js框架实现表单排序和分页效果_网络技术_宿州市腾雀网络科技有限公司

vue.js框架实现表单排序和分页效果

发布时间 - 2026-01-11 02:42:56 点击率：次

本文实例为大家分享了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.js # 表单排序 # 分页 # Vue.js实现多条件筛选、搜索、排序及分页的表格功能 # Vue.js bootstrap前端实现分页和排序 # Vue.js结合bootstrap前端实现分页和排序效果 # 基于Vue.js的表格分页组件 # vuejs2.0实现一个简单的分页示例 # Vue.js实现分页查询功能 # vue.js表格分页示例 # vuejs手把手教你写一个完整的购物车实例代码 # 用vuex写了一个购物车H5页面的示例代码 # vue 2.0 购物车小球抛物线的示例代码 # Vue+Node实现商品列表的分页、排序、筛选 # 添加购物车功能详解 # 下一页 # 上一页 # 不能用 # 大家分享 # 表单 # 具体内容 # 大家多多 # body # title # id # div # javascript # min # lib # text # type # app # template # page

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：SQL失败重试机制设计_SQL事务失败恢复实例

下一篇：源码建站一键生成系统整合SEO优化与批量建站核心技术

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：SQL失败重试机制设计_SQL事务失败恢复实例

下一篇：源码建站一键生成系统整合SEO优化与批量建站核心技术