大家好,又见面了,我是你们的朋友全栈君。
今天有人问我怎么用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
}
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/187167.html原文链接:https://javaforall.cn