vue分页

方法一:

直接在页面引入组件

<template>
  <div class="page-bar">
    <ul>
      <li v-if="cur > 1">
        <a v-on:click="cur--, pageClick()">{{ LANG.test1.desc152 }}</a>
      </li>
      <li v-if="cur == 1">
        <a class="banclick">{{ LANG.test1.desc152 }}</a>
      </li>
      <!--当前页背景色为蓝色-->
      <li
        v-for="index in indexs"
        :key="index"
        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()">{{ LANG.test1.desc153 }}</a>
      </li>
      <li v-if="cur == all">
        <a class="banclick">{{ LANG.test1.desc153 }}</a>
      </li>
      <li>
        <a
          >{{ LANG.test1.desc154 }}<i>{{ all }}</i
          >{{ LANG.test1.desc155 }}</a
        >
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>
.page-bar {
  width: 90%;
  padding: 1rem;
  margin: 0 auto;
}

ul,
li {
  margin: 0rem;
  padding: 0rem;

}
li {
  list-style: none;
}
.page-bar li:first-child > a {
  margin-left: 0rem;

}
.page-bar a {
  border: 0.01rem solid #ddd;
  text-decoration: none;
  position: relative;
  left: 1%;
//  margin-top: 10%;
  float: left;
  padding: 0.06rem 0.12rem;
  // margin-left: -0.01rem;
  line-height: 1.42857143;
  color: #337ab7;
  cursor: pointer;
}
.page-bar a:hover {
  background-color: #eee;
}
.page-bar a.banclick {
  cursor: not-allowed;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0rem 0.04rem;
  font-size: 0.12rem;
}
</style>

<script>
export default {
  props: {
    url: ""
  },
  data() {
    return {
      all: 10, //总页数
      cur:1, //当前页码
      totalPage: 0,
    };
  },
  mounted() {
    this.dataListFn();
  },
  methods: {
    //请求数据
    dataListFn: function (index) {
      console.log(this.url, "=================");
      this.$axios
        .get(this.url, {
          params: {
            num: 0,
            currentPage: this.cur,
            // page: index,
            // limit: "10",
            // state: 0
          },
        })
        .then((res) => {
          console.log(res, "==");
          if (res.status == 200) {
            this.dataList = res.data.data.dataList;
            // for (let i = 0; i < res.data.data.dataList.length; i++) {
            //   this.dataList.push(res.data.data.dataList[i]);
            // }

            console.log(this.dataList, "22");
            this.all = res.data.data.totalPage; //总页数
            this.cur = res.data.data.currentPage;
            this.totalPage = res.data.data.pageSize;
            this.$emit('change', this.dataList);
            // this.curNum = this.cur;
          }
          console.log(res);
          console.log(res.data.data.totalPage);
          console.log(this.all);
        });
    },
    //分页
    btnClick: function (data) {
      console.log(this.cur, "qq");
      //页码点击事件
      if (data != this.cur) {
        this.cur = data;
        console.log(this.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) {
        //这里最大范围从3到6,如果到达7,那么下边加2变成9,已经超过最大的范围值
        if (this.cur > 3 && this.cur < this.all - 2) {
          //以4为参考基准,左面加2右边加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++;
      }
      console.log(ar);
      return ar;
    },
  },
};
</script>
 
方法二:
多个页面需要分页
①在main.js写
const REQ_URL = { //api地址
  petList: "/website/pet",
  recently: "/website/recently",
  PersonalPet: "/website/PersonalPet" ,
}
Vue.prototype.URL_LIST = REQ_URL;
②页面html引入组件
<Fenye :url="this.URL_LIST.petList" v-on:change="change1"></Fenye>
③在script
methods:{
change1(value) {
      console.log(value, "aa");
      console.log(this.curNum, "num");
      console.log(this.dataList, "dataList");
      this.dataList = value; // this.curNum = value;//组件传参
      console.log("=============");
    },
posted @   koo-  阅读(151)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示