zoukankan      html  css  js  c++  java
  • vue实现分页

    效果图:

    html页面:

    data数据:

    方法:

    计算属性:

    样式:

    html代码:

    <!--分页-->
    <div class="page-bar">
    <ul>
    <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
    <li v-if="cur==1"><a class="banclick">上一页</a></li>
    <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
    <a v-on:click="btnClick(index)">{{ index }}</a>
    </li>
    <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
    <li v-if="cur == all"><a class="banclick">下一页</a></li>
    <li><a>共<i>{{all}}</i>页</a></li>
    </ul>
    </div>

    ===========================================================================

    js代码:

    data () {
    return {
    all: 10, //总页数
    cur: 1,//当前页码
    totalPage: 0,//当前条数
    }
    },
    methods: {
    //请求数据
    dataListFn: function(index){
    this.$axios.get("http://127.0.0.1:8090/demand/selectListByPage",
    {
    params:{
    page: index,
    limit:'10',
    state: 0
    }
    }).then((res) => {
    if(res.data.message == "success"){
    this.dataList=[];
    for(let i=0;i<res.data.data.length;i++){
    this.dataList.push(res.data.data[i])
    }
    this.all = res.data.totalPage;//总页数
    this.cur = res.data.pageNum;
    this.totalPage = res.data.totalPage;
    }

    });
    },
    //分页
    btnClick: function(data){//页码点击事件
    if(data != this.cur){
    this.cur = data
    }
    //根据点击页数请求数据
    this.dataListFn(this.cur.toString());
    },
    pageClick: function(){
    //根据点击页数请求数据
    this.dataListFn(this.cur.toString());
    }
    },
    computed: {
    //分页
    indexs: function(){
    var left = 1;
    var right = this.all;
    var ar = [];
    if(this.all>= 5){
    if(this.cur > 3 && this.cur < this.all-2){
    left = this.cur - 2
    right = this.cur + 2
    }else{
    if(this.cur<=3){
    left = 1
    right = 5
    }else{
    right = this.all
    left = this.all -4
    }
    }
    }
    while (left <= right){
    ar.push(left)
    left ++
    }
    return ar
    }
    }

    ================================================================================

    css代码:

    /*分页*/
    .page-bar{
    margin:40px auto;
    margin-top: 150px;

    }
    ul,li{
    margin: 0px;
    padding: 0px;
    }
    li{
    list-style: none
    }
    .page-bar li:first-child>a {
    margin-left: 0px
    }
    .page-bar a{
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #5D6062;
    cursor: pointer;
    margin-right: 20px;
    }
    .page-bar a:hover{
    background-color: #eee;
    }
    .page-bar a.banclick{
    cursor:not-allowed;
    }
    .page-bar .active a{
    color: #fff;
    cursor: default;
    background-color: #E96463;
    border-color: #E96463;
    }
    .page-bar i{
    font-style:normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
    }

     
  • 相关阅读:
    我爱java系列之---【微服务间的认证—Feign拦截器】
    我爱java系列之---【设置权限的三种解决方案】
    581. Shortest Unsorted Continuous Subarray
    129. Sum Root to Leaf Numbers
    513. Find Bottom Left Tree Value
    515. Find Largest Value in Each Tree Row
    155. Min Stack max stack Maxpop O(1) 操作
    painting house
    Minimum Adjustment Cost
    k Sum
  • 原文地址:https://www.cnblogs.com/web-aqin/p/10769435.html
Copyright © 2011-2022 走看看