vue前端手写分页，cv即用！

最新推荐文章于 2024-09-24 10:50:41 发布

m0_65678046

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量99

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_65678046/article/details/142206346

版权

<template>
  <div>
<p v-for="item  in prinData" :key="item.id" >
      <span>{{item.CustomNo}}</span>
      <span>{{item.title}}</span>
    </p>

    总条数：{{totalNum}}
    页：{{currentPage}}
    设置页条数：{{pageSize}}
    <button @click="changeVal(currentPage - 1)" :disabled="currentPage<=1">上一页</button>
    <button @click="changeVal(currentPage + 1)" :disabled="Math.ceil(totalNum/pageSize)<=this.currentPage">下一页</button>
  </div>
</template>
<script>
export default {
  name: 'App',
data() {
    return {
     //原始数组
      prinDataList:[
        {id:1,CustomNo:1,title:'我是第1条'},
        {id:2,CustomNo:2,title:'我是第2条'},
        {id:4,CustomNo:4,title:'我是第4条'},
        {id:3,CustomNo:3,title:'我是第3条'},
        {id:5,CustomNo:5,title:'我是第5条'},
      ],
      prinData:[],//截取后的数组
      currentPage:1,//页数
      pageSize:2,//条数
      totalNum:0,
}
},
 mounted() {
    // 获取所有数据并转JSon,防止数据被修改
    this.totalNum = this.prinDataList.length
    this.prinDataList = JSON.stringify(this.prinDataList)
    this.getPriData()
  },
  methods: {
    changeVal(val){
      this.currentPage = val
      this.getPriData()

    },
    getPriData(){
      //原始数据
      // let data =JSON.parse(this.prinDataList)
      // sort 根据条件CustomNo进行正序排序后的数据
      let data =this.prinDataList ? JSON.parse(this.prinDataList).sort((a,b)=>{return Number(a.CustomNo) - Number(b.CustomNo)}):''
      this.prinData = []
      this.prinData = data.splice((this.currentPage - 1) * this.pageSize, this.pageSize);
    },
}

}
</script>