vue怎么实现分页_vue实现表格

vue怎么实现分页_vue实现表格今天有人问我怎么用vue实现分页功能,我开始觉得这不是后端的事吗?怎么我们前端也要干了,而且现在怎么多UI库,比如Element-ui,我觉得这是个很好的前端UI库啊。不过既然有人问了,我就写写吧。这是我的HTML代码<template><ul><!–上一页按钮–><li><buttonclass=”el-icon-arrow-left”@click=”getPageGo(-1)”:disabled=”isAc.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

	今天有人问我怎么用vue实现分页功能,我开始觉得这不是后端的事吗?怎么我们前端也要干了,而且现在怎么多UI库,比如Element-ui,我觉得这是个很好的前端UI库啊。不过既然有人问了,我就写写吧。

这是我的HTML代码

<template>
  <ul>
    <!--上一页按钮-->
    <li><button class="el-icon-arrow-left" @click="getPageGo(-1)" :disabled="isActive"></button></li>
    <!--页码数按钮-->
    <li v-for="(item, index) in total" :key="index"><button @click="getPage(index)":class="index==queryInfo.pagenum-1 ? 'active':''">{
  
  {index+1}}</button></li>
    <!--下一页按钮-->
    <li><button class="el-icon-arrow-right" :disabled="isEnd" @click="getPageGo(1)"></button></li>

  </ul>
</template>

css样式是这样的:

ul{ 
   
  height: 50px;
}
  li{ 
   
    list-style-type: none;
    font-size: 10px;
    float: left;
    width: 40px;
  }
  .active{ 
   
    color: #fff;
    background-color: #2959df;
  }
	具体效果图为这样:

在这里插入图片描述 下面就是我的JS代码了,我设置当页码数为一时,上一页按钮被禁用,页数达到最后一页是,下一页按钮被禁用。具体代码如下所示:

<script>
  //封装axios函数
  import { 
   request} from "../../request";

  export default { 
   
    name: "page",
    data(){ 
   
      return { 
   
        //页面渲染数据
        cateList:[],
        total:0,
        //前端请求参数
        queryInfo: { 
   
          query: '3',
          //访问第几页的页码数
          pagenum: 1,
          //页面展示的数据条数
          pagesize: 5
        }
      }
    },
    mounted() { 
   
      let queryInfo = this.queryInfo
      this.getPageList(queryInfo)
    },
    methods:{ 
   
      //点击页码数按钮进行页面跳转
      getPage(index){ 
   
        this.queryInfo.pagenum = index+1
        let queryInfo = this.queryInfo
        this.getPageList(queryInfo)
      },
      //根据请求数据与后台交互
      getPageList(queryInfo){ 
   
        console.log(queryInfo.pagenum)
        request({ 
   url:'categories',params:queryInfo,method:'get'}).then(res=>{ 
   
          this.cateList = res.data
          this.total = res.data.total / this.queryInfo.pagesize
          console.log(res)
        }).catch(error=>{ 
   
          console.log(error)
        })
      },
      //点击上一页和下一页
      getPageGo(index){ 
   
        this.queryInfo.pagenum = this.queryInfo.pagenum + index
        let queryInfo = this.queryInfo
        this.getPageList(queryInfo)
      }
    },
    computed:{ 
   
      //当页码数到第一页时,上一页按钮禁用
      isActive(){ 
   
        if(this.queryInfo.pagenum > 1){ 
   
          return  false
        }else { 
   
          return  true
        }
      },
      //当页码数到最后一页时,下一页按钮禁用
      isEnd(){ 
   
        if(this.queryInfo.pagenum === Math.ceil(this.total)){ 
   
          return  true
        }else { 
   
          return  false
        }
      }
    }
  }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187167.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • C++版OpenCV使用支持向量机svm进行mnist手写数字识别

    C++版OpenCV使用支持向量机svm进行mnist手写数字识别支持向量机svm也是一种机器学习算法,采用空间超平面进行数据分割,在这篇博客中我们将使用svm进行手写数字的识别,使用该算法,识别率可以达到100%。环境准备:vs2015OpenCV4.5.0下面的代码为svm模型训练代码:#include<iostream>#include<opencv.hpp>#include<string>#include<fstream>usingnamespacestd;usingnamespace

  • java培训学费_北京Java培训班学费很贵吗,包含了哪些收费项目

    java培训学费_北京Java培训班学费很贵吗,包含了哪些收费项目原标题:北京Java培训班学费很贵吗,包含了哪些收费项目北京的Java培训班有很多,价格却是相差不多的,但培训的课程就参差不齐了,有的培训班就是为了赚钱而存在的,想要系统的学习Java,确保学习效果,那么你一定要挑选正规的Java培训班,挑选适合自己的Java课程,培训费用可以在和机构老师详谈。我们先来看看Java培训机构的收费情况,学费都包含了哪些呢?专业的Java培训在硬件设施上,在师资力量上…

  • Hadoop集群搭建教程(详细)「建议收藏」

    Hadoop集群搭建教程(详细)「建议收藏」需要的安装包:  1.jdk压缩包  2.hadoop压缩包请前往我的github上下载相关安装包开始搭建hadoop集群一.使用VMvare创建两个虚拟机,我使用的是ubuntu16.04版本的因为默认的虚拟机主机名都是ubuntu,所以为了便于虚拟机的识别,创建完成虚拟机后我们对虚拟机名进行修改,我们把用于主节点的虚拟机名称设为master(按自己的喜好创建),把用于从节点的虚拟机名称…

    2022年10月24日
  • 《Effective C++ 》学习笔记——规定10「建议收藏」

    《Effective C++ 》学习笔记——规定10

  • ResNet18代码实现[通俗易懂]

    ResNet18代码实现[通俗易懂]importtensorflowastffromtensorflowimportkerasfromtensorflow.kerasimportlayers,Sequential,Model,datasets,optimizers#自定义的预处理函数defpreprocess(x,y):#调用此函数时会自动传入x,y对象,shape为[b,28,28],[b]#标准化到0-1x=2*tf.cast(x,dtype=t…

  • SP网站SelectSql和searchSql的区别

    SP网站SelectSql和searchSql的区别新入行小白,如有不足请多指教。SP网站进行二次开发,需要对VS开发的页面内的自定义列表行进行删除,需求是用户或者项目经理只能查到并且删除自己的列表。最终发现将源码searchSql改为SelectSql,页面成功显示。此代码中searchSql代表显示所有信息,SelectSql显示特定信息。修改别人的代码真头大。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号