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)
blank

相关推荐

  • 数据库泄密 事件_sql数据库安全

    数据库泄密 事件_sql数据库安全最近,国外安全研究团队Cyble确定并验证了曾经一度风光无限的WeLeakData论坛的数据库泄漏。而该论坛,从名字就可以看出,其是自2019年以来运营最大的数据库泄漏和激活成功教程社区之一。…

  • GridView中DropDownList的事件

    GridView中DropDownList的事件 GridView中DropDownList的事件   1.获取事件所在GridView的行索引:   可以通过一下代码获得:  protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)    {        DropDownList drp = sender as DropDow

  • WEB日志格式

    WEB日志格式WEB日志格式日志格式类型:常见日志格式:参考:WEB日志格式CustomLogFormats:普通日志格式日志格式类型:目前常见的WEB日志格式主要由两类Apache的NCSA日志格式,NCSA格式分为NCSA普通日志格式(CLF)NCSA扩展日志格式(ECLF)IIS的W3C日志格式目前最常用的是NCSA扩展日志格式(ECLF…

  • 获取UUID_js获取用户唯一标识

    获取UUID_js获取用户唯一标识需求:​ 很多时候我们会需要用到生成不重复的唯一标识的的功能,如数据库表中的主键等。实现:​ 使用UUID生成唯一、不重复的字符串。importjava.util.UUID;publicclassUUIDUtils{publicstaticStringgetUUID(){returnUUID.randomUUID().toString().replace(“-“,””);}}什么是UUID:​ UUID通用唯一识别码

  • codeblocks怎么设置中文[通俗易懂]

    codeblocks怎么设置中文[通俗易懂]1下载语言包local2将语言包解压后放进新的位置codeblocks里面share的位置例如E:\新建文件夹\codeblocks\CodeBlocks\share\CodeBlocks然后进入codeblocks点击导航条的setting然后点击第二的大图标(视图)在里面选择长条框里选择中文就可以了。重启一下语言包的资源:https://pan.baidu.com/s/1SXYKt…

  • 【2022最新Java面试宝典】—— Java基础知识面试题(91道含答案)

    【2022最新Java面试宝典】—— Java基础知识面试题(91道含答案)目录一、Java概述1.何为编程2.什么是Java3.jdk1.5之后的三大版本4.Jdk和Jre和JVM的区别5.什么是跨平台性?原理是什么6.Java语言有哪些特点7.什么是字节码?采用字节码的最大好处是什么8.什么是Java程序的主类?应用程序和小程序的主类有何不同?9.Java应用程序与小程序之间有那些差别?10.Java和C++的区别11.OracleJDK和OpenJDK的对比二、基础语法数据类型12.Java有哪些数据类型13.switch是否能作用在by

发表回复

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

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