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) {}
- }
来源: http://www.bubuko.com/infodetail-3202885.html