对Ant Design of Vue分页pagination再次进行封装

左手的ㄟ右手 2022-11-13 06:25 359阅读 0赞

![在这里插入图片描述][20210326105014537.png]

**pagination.vue(组件页面的内容)**

<template>
    
    <a-pagination
        v-model="current"
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        :page-size="pagesize"
        @change="change"
        @showSizeChange="onShowSizeChange"
        :pageSize.sync="currentPageSize"
        :show-total="total => `共 ${total} 条`"
      />
    </template>
    
    <script>
    export default { 
      name: 'my-pagination',
      props: { 
        value: {  // 当前页
          type: Number,
        },
        hideOnSinglePage: { 
          type: Boolean,
          default: false,
        },
        pagesize: { 
          type: Number,
          default: 8,
        },
        pageSizeOptions: { 
          type: Array,
          default () { 
            return [ '8', '16', '24', '32', ]
          },
        },
        showQuickJumper: { 
          type: Boolean,
          default: true,
        },
        showSizeChanger: { 
          type: Boolean,
          default: true,
        },
        simple: { 
          type: Boolean,
          default: false,
        },
        size: { 
          type: String,
          default: '',
        },
        total: { 
          type: Number,
          default: 1,
        },
      },
      data () { 
        return { 
          current: this.value,
          currentPageSize: this.pagesize,
        }
      },
      watch: { 
        value (val) { 
          this.current = val
        },
        pagesize (val) { 
          this.currentPageSize = val
        },
      },
      methods: { 
        change (pageno, pagesize) {  //页码，条数
          this.$emit('change', pageno, pagesize)
        },
        onShowSizeChange (current, size) {  //条数变化的回调
          this.$emit('onShowSizeChange', current, size)
        },
      },
    }
    </script>

使用组件：

<template>
      <div>
    	  <a-table :columns="columns" :data-source="data" :pagination="false">
    	    <a slot="name" slot-scope="text">{ {  text }}</a>
    	  </a-table>
    	  
    	    <my-pagination
    	      :total="total"
    	      v-model="pageno"
    	      :pageSize.sync="pagesize"
    	      @change="handlePageChange"
    	      @onShowSizeChange="onShowSizeChange"
    	    ></my-pagination>
      </div>
    </template>
    <script>
    const columns = [
      { 
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        scopedSlots: {  customRender: 'name' },
      },
      { 
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: 80,
      },
      { 
        title: 'Address',
        dataIndex: 'address',
        key: 'address 1',
        ellipsis: true,
      },
      { 
        title: 'Long Column Long Column Long Column',
        dataIndex: 'address',
        key: 'address 2',
        ellipsis: true,
      },
      { 
        title: 'Long Column Long Column',
        dataIndex: 'address',
        key: 'address 3',
        ellipsis: true,
      },
      { 
        title: 'Long Column',
        dataIndex: 'address',
        key: 'address 4',
        ellipsis: true,
      },
    ];
    
    const data = [
      { 
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
      },
      { 
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 2 Lake Park, London No. 2 Lake Park',
        tags: ['loser'],
      },
      { 
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },
    ];
    import myPagination from "../../../components/pagination/pagination"; //引入
    export default { 
      components: { 
        myPagination
      },
      data() { 
        return { 
          total: 0, //定义初始有多少条数据
          pageno: 1, //默认第几页
          pagesize: 8, //一页显示多少条数据
          data,
          columns,
        };
      },
      methods:{ 
      this.querysyJyz(){   //这个是向后台请求的数据函数
    	//自己写执行的内容
     }, 
      handlePageChange(pageno, pagesize) {  //点击第几页触发的函数
          this.pageno = pageno;
          this.pagesize = pagesize;
          this.querysyJyz(); //这个是向后台请求的数据函数
        },
       onShowSizeChange(current, size) {   //改变每页显示条目数的函数
          //pagesize 变化的回调
          this.pageno = current;
          this.pagesize = size;
          this.querysyJyz(); //这个是向后台请求的数据函数
        },
      }
    };
    </script>

[20210326105014537.png]: /images/20221022/99d5a5ae75664e6bba5e9146b99e35d9.png