VUE手写分页

效果图

代码

<template>
  <div class="home">
    <div class="top">
      <div class="title">
        <div>商品ID</div>
        <div>商品名称</div>
        <div>产品介绍</div>
        <div>产品价格</div>
      </div>
      <div v-for="item in list" :key="item.spuId" class="app">
        <div>{{ item.spuId }}</div>
        <div>{{ item.spuTitle.substr(0, 10) }}</div>
        <div>{{ item.spuSubTitle.substr(0, 10) }}</div>
        <div>{{ item.price }}</div>
      </div>
    </div>
    <div class="bottoms">
      <div>
        每页
        <select :value="pagesize" @change="ChangePagesize">
          <option value="1">1</option>
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
        </select>
        条，共{{ total }}条
      </div>
      <div class="bottom">
        <div class="bottom-box">
          <div v-for="(item,index) in calcPage" :key="index"><div :class="pagenum==item?'num':''" @click="ChangePagenum(item)">{{item}}</div> </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";//引入axios
export default {
  name: "HomeView",
  data() {
    return {
      tableApp: [],//备用数据
      list:[],//渲染数据
      pagesize: 1, //数据的显示的条数
      total: 0, //总共多少条
      pagenum: 1, //当前第几页
    };
  },
  created() {
    // 数据调用
    this.getstr();
  },
  methods: {
    getstr() {
      // 请求本地数据
      axios.get("goodsList.json").then((res) => {
        // 数据进行赋值
        this.list = res.data.data.list || []
        this.tableApp = JSON.parse(JSON.stringify(res.data.data.list))
        // 获取数组的数量
        this.total = this.tableApp.length;
        // console.log(JSON.parse(JSON.stringify(res.data.data.list)),11);
        // 分页调用
        this.filterPage()
      });
    },
    // 点击切换当前的条数
    ChangePagesize(val) {
      // console.log(val);
      // 获取去数量
      this.pagesize = val.target.value
      // 默认是1
      this.pagenum = 1
      // 分页调用
      this.filterPage()
    },
    // 点击事件切换页数
    ChangePagenum(val) {
      // 获取页数
      this.pagenum = val   
      // 调用分页
      this.filterPage()
    },
    filterPage(){
      // 这里就是数组截取
      this.list = this.tableApp.slice((this.pagenum-1)*this.pagesize,this.pagenum*this.pagesize)
    }
  },
  computed: {
    calcPage() {
      let num = Math.ceil(this.total / this.pagesize)
      if(num<=7){
        return num
      }else{
        // 一定会出现...
        // 这里通过element-ui的分页效果实现的
        if(this.pagenum<=5){
          return [1,2,3,4,5,6,'...',num]
        }else if(this.pagenum>=(num-3)){
          return [1,'...',num-5,num-4,num-3,num-2,num-1,num]
        }else {
          return [1,'...',this.pagenum-2,this.pagenum-1,this.pagenum,this.pagenum+1,this.pagenum+2,'...',num]
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: pink;
  .top {
    width: 900px;
    .title {
      display: flex;

      div {
        text-align: center;
        font-size: 20px;
        font-weight: 900;
        width: 300px;
        line-height: 40px;
        border: 1px solid #ccc;
      }
    }
    .app {
      display: flex;
      align-items: center;
      div {
        width: 300px;
        border: 1px solid #ccc;
        height: 40px;
        text-align: center;
        line-height: 40px;
        overflow: hidden;
        white-space: nowrap;
      }
      .img {
        width: 60px;
        height: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .bottoms {
    margin: 15px 0 90px 0;
    width: 900px;
    display: flex;
    justify-content: space-between;
    .bottom {
      .bottom-box {
        display: flex;
        div {
          width: 25px;
          text-align: center;
          line-height: 25px;
          border-radius: 3px;
          height: 25px;
          margin-right: 10px;
          // border: 1px solid rgb(24, 156, 238);
          background: #dddddf;
          .num{
            background: #409eff;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

json 本地数据

{
    "ret": 0,
    "sub": 0,
    "msg": "success",
    "data": {
        "itemCount": 21,
        "pageCount": 2,
        "page": 1,
        "num": 20,
        "list": [
            {
                    "price": "129.00",
                    "spuTitle": "Smartisan 真无线蓝牙耳机 Pro",
                    "spuId": 1,
                    "spuSubTitle": "通话降噪 全新升级"
            },
          
            {
                    "price": "299.00",
                    "spuTitle": "Smartisan 手机立式扩展坞",
                    "spuId": 2,
                    "spuSubTitle": "连屏幕，连外设，手机拓展一步到位"
            },
            {
                    "price": "1199.00",
                    "spuTitle": "Smartisan TNT go",
                    "spuId": 3,
                    "spuSubTitle": "欢迎使用下一代电脑"
            },
            {
                    "price": "3999.00",
                    "spuTitle": "Smartisan TNT 大满足套装",
                    "spuId": 4,
                    "spuSubTitle": "下一代手机，下一代电脑"
            },
            {
                    "price": "299.00",
                    "spuTitle": "Smartisan 真无线蓝牙耳机（抖音文创限量款）",
                    "spuId": 5,
                    "spuSubTitle": "六月配件直降"
            },
            {
                    "price": "39.00",
                    "spuTitle": "Smartisan 多功能数据线（USB 3.2 Gen 2）",
                    "spuId": 6,
                    "spuSubTitle": "高清投屏，高速传输" 
            },
            {
                    "price": "39.00",
                    "tagType": 0,
                    "spuTitle": "Smartisan 手机支架",
                    "spuId": 7,
                    "spuSubTitle": "立得住，放的稳"
            },
            {
                    "price": "499.00",
                    "spuTitle": "Smartisan 智能手写笔",
                    "spuId": 8,
                    "spuSubTitle": "六月配件直降"
            },
            {
                    "price": "59.00",
                    "spuTitle": "坚果 R2 足迹系列保护套",
                    "spuId": 9,
                    "spuSubTitle": "7种主题随机发货"
            },
            { 
                    "price": "29.00",
                    "spuTitle": "坚果 R2 足迹系列保护套 联合国通过《儿童权利宣言》",
                    "spuId": 10,
                    "spuSubTitle": "为了那些改变人类足迹的进程" 
            },
            {
                    "price": "59.00",
                    "spuTitle": "坚果 R2 足迹系列保护套 圆珠笔的改进者出生",
                    "spuId": 11,
                    "spuSubTitle": "为了那些改变人类足迹的进程"
            },
            {  
                    "price": "29.00",
                    "spuTitle": "坚果 R2 足迹系列保护套 3M 开始销售透明胶带",
                    "spuId": 12,
                    "spuSubTitle": "为了那些改变人类足迹的进程"
            },
            {
                    "price": "59.00",
                    "spuTitle": "坚果 R2 足迹系列保护套 正电子的发现者出生",
                    "spuId": 13,
                    "spuSubTitle": "为了那些改变人类足迹的进程"  
            },
            {
                    "price": "29.00",
                    "spuTitle": "坚果 R2 透明保护套",
                    "spuId": 14,
                    "spuSubTitle": "TPU透明软胶材质，耐磨耐用"
            },
            {
                    "price": "2699.00",
                    "spuTitle": "坚果 R2",
                    "spuId": 15,
                    "spuSubTitle": "是下一代手机，更是下一代电脑"
            },
            {
                    "price": "99.00",
                    "spuTitle": "Smartisan 真无线TWS蓝牙耳机",
                    "spuId": 16,
                    "spuSubTitle": "智能配对 开盖即连"
                
            },
            {
                    "price": "29.00",
                    "spuTitle": "足迹保护套 莱卡成为第一只进入地球轨道的动物 for iPhone 11",
                    "spuId": 17,
                    "spuSubTitle": "公益宝贝"
            },
            {
                    "price": "69.00",
                    "spuTitle": "足迹保护套 克里斯蒂安·多普勒出生 for iPhone 11",
                    "spuId": 18,
                    "spuSubTitle": "六月配件直降"
            },
            { 
                    "price": "29.00",
                    "spuTitle": "足迹保护套 人类首次公开使用乙醚 for iPhone 11",
                    "spuId": 19,
                    "spuSubTitle": "公益宝贝"
            },
            {
                    "price": "199.00",
                    "spuTitle": "Smartisan  颈挂蓝牙耳机",
                    "spuId": 20,
                    "spuSubTitle": "“圈铁一体代表作”"
            }
        ]
    }
}