pc-component-v5/packages/page-size-select/src/SizePagination.vue

// /**
//  * 可以修改页面显示总数的分页组件。其中页面总数修改以后，会缓存在localstorage中，再次打开界面会记住，并恢复该数量。
//  */
// <template>
//     <div>
//         <div class="table-header-left">
//             <span>第
//                 {{ (pagination.current_page - 1) * pagination.per_page + 1 }}
//                 -
//                 {{pagination.current_page*pagination.per_page}}
//                 条,共计
//                 {{pagination.total}}
//                 条,每页
//             </span>

//             <select class="pagesize-select form-control"
//                     id="gridSizeSelect"
//                     v-model="pageSize">
//                 <option value="10">10</option>
//                 <option value="20">20</option>
//                 <option value="50">50</option>
//                 <option value="100">100</option>
//                 <option value="200">200</option>
//                 <option value="500">500</option>
//             </select>

//             <span>
//                 条
//             </span>
//         </div>

//         <div class="table-header-right">
//             <Pagination v-if="pagination.last_page > 0"
//                         :pagination="pagination"
//                         :callback="callback"></Pagination>
//         </div>
//     </div>

// </template>

// <script>

// // 外部可以注册事件pageSizeChanged
// import Pagination from "vue-bootstrap-pagination";

// export default  {
//     name: "SizePagination",

//     /**
//      * @property { 字符串 } localStoragePageName 控件名称，分页参数会以 ${localStoragePageName} 为key存储在 localStorage 中。
//      * @property { object } value 
//      * {
//      *      currentPage : 当前所在的页面（从1开始），正整数
//      *      perPage : 页面显示的数量
//      *      total : 总数量
//      * }
//      * @property {字符串} size: 分页组件的大小，可选值：large、small、空
//      */
//     props: [localStoragePageName, value, size],

//     data: function () {
//         return {
//             mPagination: {
//                 per_page: Common.pageSize, // required
//                 current_page: 1, // required
//                 last_page: 0, // required
//                 total: 0,
//             },
//             pageSize: 20
//         }
//     },

//     components: {
//         Pagination
//     },

//     methods: {
//         /**
//          * 当页面数量、
//          */
//         callback: function () {
//             // 每页显示的数量
//             // 当前页数
//         }
//     },

//     mounted: function () {
//         if (this.value != null) {
//             this.mPagination = {
//                 per_page: 
//             }
//         }

//     },

//     watch: {
//         pageSize: function (newValue, oldValue) {
//             let newPagination = {};
//             Object.assign(newPagination, this.value, { per_page: newValue });
//             this.$emit("input", newValue);
//         }
//     }
// }
// </script>

// <style scoped>
// .page-box {
//     display: flex;
//     flex-direction: row;
//     flex-wrap: wrap;
//     justify-content: space-between;
//     align-items: center;
// }

// .page-item-left {
//     order: 1;
//     flex-basis: auto;
// }

// .page-item-right {
//     order: 2;
//     flex-basis: auto;
//     flex-shrink: 0;
// }

// .pagesize-select {
//     display: inline !important;
//     width: 70px !important;
//     float: none !important;
// }
// </style>