vuejs实现本地数据的筛选分页功能思路详解


Posted in Javascript onNovember 15, 2017

今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码

效果图:

vuejs实现本地数据的筛选分页功能思路详解

项目需要:点击左侧进行数据筛选,实现自动分页,自动生成页数,点击自动跳转

项目代码:js代码

var subList=new Vue({
  el:'#main',
  data:{
    // subcontentData为本地数据
    subContents:subcontentData,
    // 页面需要展现的数据
    yemiandata:[],
    // 页面展现条数
    datanum:12,
    // 开始椰树
    startnum:0,
    // 结束椰树
    endnum:1,
    // 一共多少页
    btnnum:0,
    // 生成切换页面的按钮用
    listnum:[],
    // input跳转
    jemp:1,
  },
  methods:{
    filters(num){
      this.subContents=subcontentData;
      // 需要重置防止翻页导致startnum和endnum不一致
      this.startnum=0;
      this.endnum=1;
      // 这里是判断筛选按钮
      switch(num){
        case 0: $('#sublist li').css({
          background:'#f2f2f2'
        }).eq(0).css({
          background:'#dbe9f0'
        });
          this.fenye();
          break;
        case 1:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(1).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('行政');
          });
          this.fenye();
          break;
        case 2:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(2).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('报关');
          });
          this.fenye();
          break;
        case 3:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(3).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('组装');
          });
          this.fenye();
          break;
        case 4:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(4).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('电子');
          });
          this.fenye();
          break;
        case 5:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(5).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('工艺');
          });
          this.fenye();
          break;
        case 6:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(6).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('财务');
          });
          this.fenye();
          break;
        case 7:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(7).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('制造');
          });
          this.fenye();
          break;
        case 8:
          $('#sublist li').css({
            background:'#f2f2f2'
          }).eq(8).css({
            background:'#dbe9f0'
          });
          this.subContents=this.subContents.filter(num=>{
            return String(num['department']).includes('销售');
          });
          this.fenye();
          break;
      }
    },
    // 分野函数
    fenye(){
      this.yemiandata=this.subContents.slice(this.startnum*this.datanum,this.endnum*this.datanum);
      this.btnnum=Math.ceil(this.subContents.length/this.datanum);
      this.listnum=[];
      for(i=0;i<this.btnnum;i++){
        this.listnum[i]=i+1;
      }
      btnwidth();
    },
    // 下一页函数
    nextlist(){
      if(this.endnum>= this.btnnum){
        alert('最后一页了');
        return false;
      }
      this.endnum++;
      this.startnum++;
    },
    // 上一页函数
    prevlist(){
      if(this.startnum<= 0){
        alert('第一页了');
        return false;
      }
      this.endnum--;
      this.startnum--;
    },
    // 按钮跳转到制定的页面
    jemppage(list){
      this.startnum=list-1;
      this.endnum=list;
    },
    // input跳抓
    goindex(){
      console.log(parseInt(this.jemp));
      if(parseInt(this.jemp)>this.btnnum){alert('请输入合法参数');return}
      this.endnum=this.jemp;
      this.startnum=this.jemp-1;
    }
  },
  // 使用一个监听。可以减少很多代码
  watch:{
    startnum(n,o){
      this.yemiandata=this.subContents.slice(n*this.datanum,(parseInt(n)+1)*this.datanum);
    }
  }
});
  subList.filters(0);
  subList.fenye();
  // 封装一下底部btn方法 底部自动大小
  function btnwidth(){
    $('#fbtn').css({
      width:(subList.listnum.length+2)*40+293+'px',
      marginLeft:-((subList.listnum.length+2)*40+293)/2+'px'
    })
  }
  btnwidth();

下面是html节点代码:

<div class="main_content">
      <div class="table2_nav">
        <ul id="sublist">
          <li @click="filters(0)"><div class="blockcenter">部门分类(部门8/8)</div></li>
          <li @click="filters(1)"><div class="blockcenter">行政部</div></li>
          <li @click="filters(2)"><div class="blockcenter">报关科</div></li>
          <li @click="filters(3)"><div class="blockcenter">组装部</div></li>
          <li @click="filters(4)"><div class="blockcenter">电子部</div></li>
          <li @click="filters(5)"><div class="blockcenter">工艺部</div></li>
          <li @click="filters(6)"><div class="blockcenter">财务部</div></li>
          <li @click="filters(7)"><div class="blockcenter">制造部</div></li>
          <li @click="filters(8)"><div class="blockcenter">销售部</div></li>
        </ul>
      </div>
      <div class="table2_content">
        <div class="col-title bg-fff clearfix">
          <h5 class="fl">告警策略报表统计</h5>
          <div class="btn fl">
            主机名称 <span class="caret"></span>
            <div class="btn_down">
              <ul>
                <li>下啦</li>
                <li>下啦2</li>
              </ul>
            </div>
          </div>
          <div class="fl btn2">
            添加
          </div>
        </div>
        <table width="1410px" class="table" id="tablelist tab">
          <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>部门名称</th>
            <th>性别</th>
            <th>籍贯</th>
            <th>员工状态</th>
            <th>入职时间</th>
            <th>离职时间</th>
            <th>离职类别</th>
          </tr>
          <tr v-for="subContent in yemiandata">
            <td>{{subContent.num}}</td>
            <td>{{subContent.name}}</td>
            <td>{{subContent.department}}</td>
            <td>{{subContent.sex}}</td>
            <td>{{subContent.addres}}</td>
            <td>{{subContent.staic}}</td>
            <td>{{subContent.jointime}}</td>
            <td>{{subContent.leavetime}}</td>
            <td>{{subContent.type}}</td>
          </tr>
        </table>
        <div class="vuetab clearfix">
          <ul class="fbtn clearfix" id="fbtn">
            <li @click="prevlist()"><</li>
            <!--<li @click="jemppage($event)">1</li>-->
            <li v-for="list in listnum" @click="jemppage(list)">{{list}}</li>
            <li @click="nextlist()">></li>
            <div id="pages">共{{btnnum}}页</div>
            <div id="gotoindex">到第 <input type="text" :value="jemp" v-model="jemp" id="inputnum"> 页</div>
            <button id="gobtn" @click="goindex()">确定</button>
          </ul>
        </div>
      </div>
</div>

说下思路:首先我们需要本地一组数据,通过vue添加到页面中,第二步我们需要做好分页,那么可以写一个函数对吧,所以有了下面的fenye(命名不规范,大虾勿怪)函数,所谓分页无非就是把一个大数据分成每个小页面去展现,所以我写了一个专门用来展现的数组,也就是yemiandata(同样不规范,我说因为我做的网站内容太多了,所以命名已经用尽了,你们信么),之后我们需要得到多少个页面,并变成一个btn按钮,为了省事,我增加了一个watch:用来监听startnum(开始页数)他变化的话就改变展现。

第三步:分页的话肯定要有上一页下一页,这个就简单多了下一页就是startnum和endnum都增加一,上一页反之。

第四步:也要有点击页数的按钮进行跳转,这个也不难,就是让按钮点下去跳转到指定页,但是去写函数么?不现实对吧,所以我用了一个数组listnum存放多少个按钮,这里解释下为什么不用变量用数组,因为vue中v-for不支持变量循环,所以我改用数组,方便前面html生成节点。

第五步说了需要做筛选,筛选的话就是吧需要展现的素组变成包含制定关键词的,filters函数,利用js的filter和includes进行筛选,做完看看,失败了,出现了很多undefind,为什么?仔细看看没有重置数组,导致第二次筛选是在第一次筛选完的基础筛选。那就重置一下咯,再看看,搞定!

总结

以上所述是小编给大家介绍的vuejs实现本地数据的筛选分页功能思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery的index方法实现tab效果
Feb 16 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
vue实现选中效果
Oct 07 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 #Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 #Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 #Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 #Javascript
判断div滑动到底部的scroll实例代码
Nov 15 #Javascript
Vue.js实现列表清单的操作方法
Nov 15 #Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
PHP安全编程之加密功能
2006/10/09 PHP
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
MySQL授权问题总结
2007/05/06 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Django中使用group_by的方法
2015/05/26 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
四风问题自我剖析材料
2014/10/07 职场文书
老兵退伍标语
2014/10/07 职场文书
班主任高考寄语
2015/02/26 职场文书
企业法人代表证明书
2015/06/18 职场文书
财务年终工作总结大全
2019/06/20 职场文书
golang中的struct操作
2021/11/11 Golang