动态-分页

 <template>
  <div>
      <div class="block">
            <span class="demonstration">大于 7 页时的效果</span>
            <el-pagination
                layout="prev, pager, next"
                :total="pagenum">
            </el-pagination>
       </div>
  </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
export default {
    mounted(){
        getlink("/api/listdata/tabledata").then((ok)=>{
          
            console.log(ok.data.data.length);
            console.log(Math.ceil(ok.data.data.length/2)*10);
            this.pagenum=Math.ceil(ok.data.data.length/2)*10
        })
    },
    data(){
        return {
            pagenum:0,
        }
    }
}
// 接口动态分页
// 1 拿到接口后得出里面有多少条数据
// 2 然后用得到的数据总长度除以2乘以10——Math.ceil(ok.data.data.length/2)*10
// 3 在设置一个为0的变量,将计算出来的数据条数赋值给他—— this.pagenum=Math.ceil(ok.data.data.length/2)*10
// 4 将这个变量赋值给elementui中的total—— :total="pagenum",此时页数便是动态生成的
</script>

<style>

</style>

点击当前分页展示当前数据

<template>
  <div>
      <div class="block">
            <span class="demonstration">大于 7 页时的效果</span>
            <el-pagination
                layout="prev, pager, next"
                :total="pagenum" @current-change="pagefun">
                <!-- @current-change="pagefun" 该参数表示点击的当前页 
                    在点击时将当前页发给后台
                -->
            </el-pagination>
            <ul>
                <li v-for="(v,i) in arr" :key="i">
                    {{v}}
                </li>
            </ul>
       </div>
  </div>
</template>

<script>
import {getlink} from "@/api/getapi.js"
export default {
    mounted(){
        getlink("/api/listdata/tabledata").then((ok)=>{
          
            console.log(ok.data.data.length);
            console.log(Math.ceil(ok.data.data.length/2)*10);
            this.pagenum=Math.ceil(ok.data.data.length/2)*10
        })
    },
    data(){
        return {
            pagenum:0,
            arr:[
                // {name:"xixi",age:18},
                // {name:"xixi2",age:19},
                // {name:"xixi3",age:20},
                // {name:"xixi4",age:21},
            ]
        }
    },
    methods:{
        pagefun(num){
            console.log(num);
            //    getlink("后台地址","当前点击的页面的下标发送给后台")
              getlink("/api/listdata/pagedata",{num}).then((ok)=>{
                  console.log(ok.data.data);
                //   将下标发给后台后，
                    this.arr=ok.data.data
              })
        }
    }
}
// 接口动态分页
// 1 拿到接口后得出里面有多少条数据
// 2 然后用得到的数据的length除以2乘以10——Math.ceil(ok.data.data.length/2)*10
// 3 在设置一个为0的变量,将计算出来的数据条数赋值给他—— this.pagenum=Math.ceil(ok.data.data.length/2)*10
// 4 将这个变量赋值给elementui中的total—— :total="pagenum"

// 点击展示当前分页
// 1,找到elementui中的点击事件@current-change(表示点击当前页)
// 2，将点击的当前页的下标传给后台
// 3,在将得到的数据遍历展示在页面，这样每次点击时每个分页都会展示自己的数据
</script>

<style>

</style>