vue注册全局组件分页

page.vue

<template>

  <div class="m-page">

    <Page style="margin-top:8px;"

      :current="pageParam.pageNum"

      :page-size-opts="pageSizeOpts"

      :page-size="pageParam.pageSize" 

      :total="pageParam.total" 

      show-elevator 

      show-total 

      show-sizer 

      @on-change="changePageNum" 

      @on-page-size-change="changePageSize" />

  </div>

</template>

 

<script>

  export default {

    name: 'mPage',

    props: {

      pageParam: {

        type: Object,

        default () {

          return {total: 0, pageSize: 30, pageNum: 1}

        }

      },

      pageSizeOpts: {

        type: Array,

        default () {

          return [30, 60, 90]

        }

      },

      queryFun: {

        type: Function

      }

    },

    data () {

      return {

        

      }

    },

    mounted () {

      

    },

    methods: {

      changePageSize (size) {

        this.pageParam.pageSize = size

        this.queryFun(true)

      },

      changePageNum (num) {

        this.pageParam.pageNum = num

        this.queryFun()

      },

    }

  }

 

</script>

 

<style lang="less">

 

</style>

index.js

import MPage from './page.vue'

export default (Vue)=>{

  Vue.component("MPage", MPage)

}

使用页面

<m-page :pageParam="pageParam" :queryFun="queryFun"></m-page>

data(){

　　return {

　　

pageParam: {

          total: 0,

          pageSize: 30,

          pageNum: 1

        },

}

}

methods: {

      // 列表数据查询

      queryFun (isCheck) {}

}

转载于:https://www.cnblogs.com/wssdx/p/11541610.html