vue分页组件

<template>
  <div>
    <div class="block" style="margin: 2% 25%;">
            <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="value.page"
                
                @prev-click="last"
                @next-click="next"
                @current-change="go"
                >
            </el-pagination>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            currentPage:1,
        }
    },
    props:['value'],
    methods:{
        next(){
            this.currentPage+=1
            this.$emit('next',this.currentPage)
        },
        last(){
            this.currentPage-=1
            this.$emit('last',this.currentPage)
        },
        go(val){
            this.currentPage=val
            this.$emit('exchange',val)
        }
    },
    watch:{
        value(){
            this.currentPage = this.value.current_page
        }
    }
}
</script>

<style>

</style>

 

:data="dis"        

<to-page :value="{
            page : 表格行数,
            current_page:current_page
            }" 
                @exchange="exchange"
            ></to-page>


<script>
import ToPage from '组件路径'

export default {
  components: { ToPage },
    data() {
      return {
        current_page:1,
        dis:[]
      }
    },
    methods:{
        exchange(val){
            console.log(val)
            this.current_page = val
        }
    },
    mounted(){
        for (let i=0;i<30;i++)
            this.tableData.push(this.tableData[0])
        
        for (let i=this.current_page-1;i<10;i++)
            this.dis.push(this.tableData[i])
    },
    watch:{
        current_page(){
            this.dis = []
            for (let i=(this.current_page-1)*10;i<this.tableData.length;i++)
                this.dis.push(this.tableData[i])
            }
    }
}
</script>