element-plus-pagination-enhancement
Version:
A powerful enhancement for Element Plus Pagination component that adds first/last page navigation
2 lines (1 loc) • 7.33 kB
JavaScript
(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.ElementPlusPaginationEnhancement={},s.Vue))})(this,function(s,e){"use strict";/*! Element Plus Icons Vue v2.3.1 */var y=e.defineComponent({name:"ArrowLeft",__name:"arrow-left",setup(n){return(d,l)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"})]))}}),N=y,V=e.defineComponent({name:"ArrowRight",__name:"arrow-right",setup(n){return(d,l)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"})]))}}),b=V,E=e.defineComponent({name:"DArrowLeft",__name:"d-arrow-left",setup(n){return(d,l)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z"})]))}}),x=E,P=e.defineComponent({name:"DArrowRight",__name:"d-arrow-right",setup(n){return(d,l)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688m-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"})]))}}),L=P,z=e.defineComponent({name:"More",__name:"more",setup(n){return(d,l)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M176 416a112 112 0 1 0 0 224 112 112 0 0 0 0-224m0 64a48 48 0 1 1 0 96 48 48 0 0 1 0-96m336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224m0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96m336-64a112 112 0 1 1 0 224 112 112 0 0 1 0-224m0 64a48 48 0 1 0 0 96 48 48 0 0 0 0-96"})]))}}),S=z;const M={class:"enhanced-pagination"},T={class:"el-pagination is-background"},F={class:"el-pagination__total"},A={key:0,class:"el-pagination__sizes"},j={class:"btn-group"},D=["disabled"],J=["disabled"],q={class:"el-pager"},K=["onClick"],R={class:"btn-group"},U=["disabled"],$=["disabled"],I={key:1,class:"el-pagination__jump"},C=e.defineComponent({__name:"EnhancedPagination",props:{total:{type:Number,required:!0},pageSize:{type:Number,default:10},currentPage:{type:Number,default:1},pageSizes:{type:Array,default:()=>[10,20,30,40,50]},showSizes:{type:Boolean,default:!0},showFirstPage:{type:Boolean,default:!0},showLastPage:{type:Boolean,default:!0},showJumper:{type:Boolean,default:!0},pagerCount:{type:Number,default:7}},emits:["update:currentPage","update:pageSize","size-change","current-change"],setup(n,{emit:d}){const l=n,u=d,g=(t,a)=>Array.from({length:a},(_,r)=>t+r),i=e.ref(l.currentPage),m=e.ref(l.pageSize),f=e.ref(""),h=e.computed(()=>Math.ceil(l.total/m.value)),w=e.computed(()=>i.value===1),k=e.computed(()=>i.value===h.value),G=e.computed(()=>{const t=l.pagerCount,a=Math.floor(t/2),_=i.value,r=h.value,c=[];return r<=t?g(1,r):(_<=a?c.push(...g(1,t-1),"...",r):_>r-a?c.push(1,"...",...g(r-t+2,t-1)):c.push(1,"...",...g(_-a,t-2),"...",r),c)}),p=t=>{typeof t=="number"&&t!==i.value&&(i.value=t,u("update:currentPage",t),u("current-change",t))},H=t=>{m.value=t,u("update:pageSize",t),u("size-change",t)};e.watch(()=>l.pageSize,t=>{typeof t=="number"&&(m.value=t)});const B=()=>{const t=parseInt(f.value);!isNaN(t)&&t>=1&&t<=h.value&&p(t),f.value=""},Q=()=>{p(1)},W=()=>{p(h.value)},X=()=>{w.value||p(i.value-1)},Y=()=>{k.value||p(i.value+1)};return(t,a)=>{const _=e.resolveComponent("el-option"),r=e.resolveComponent("el-select"),c=e.resolveComponent("el-icon"),Z=e.resolveComponent("el-input");return e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",T,[e.createElementVNode("div",F,"共 "+e.toDisplayString(n.total)+" 条记录",1),n.showSizes?(e.openBlock(),e.createElementBlock("div",A,[e.createVNode(r,{modelValue:m.value,"onUpdate:modelValue":a[0]||(a[0]=o=>m.value=o),onChange:H},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.pageSizes,o=>(e.openBlock(),e.createBlock(_,{key:o,value:o,label:`${o} 条/页`},null,8,["value","label"]))),128))]),_:1},8,["modelValue"])])):e.createCommentVNode("",!0),e.createElementVNode("div",j,[n.showFirstPage?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",disabled:w.value,onClick:Q},[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(e.unref(x))]),_:1})],8,D)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",disabled:w.value,onClick:X},[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(e.unref(N))]),_:1})],8,J)]),e.createElementVNode("ul",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(G.value,o=>(e.openBlock(),e.createElementBlock("li",{key:o,class:e.normalizeClass({number:!0,active:o===i.value,more:o==="..."}),onClick:v=>o!=="..."&&p(o)},[o==="..."?(e.openBlock(),e.createBlock(c,{key:0,class:"more"},{default:e.withCtx(()=>[e.createVNode(e.unref(S))]),_:1})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(o),1)],64))],10,K))),128))]),e.createElementVNode("div",R,[e.createElementVNode("button",{type:"button",disabled:k.value,onClick:Y},[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(e.unref(b))]),_:1})],8,U),n.showLastPage?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",disabled:k.value,onClick:W},[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(e.unref(L))]),_:1})],8,$)):e.createCommentVNode("",!0)]),n.showJumper?(e.openBlock(),e.createElementBlock("div",I,[a[2]||(a[2]=e.createTextVNode(" 前往 ")),e.createVNode(Z,{modelValue:f.value,"onUpdate:modelValue":a[1]||(a[1]=o=>f.value=o),modelModifiers:{number:!0},onChange:B,onKeyup:e.withKeys(B,["enter"])},null,8,["modelValue"]),a[3]||(a[3]=e.createTextVNode(" 页 "))])):e.createCommentVNode("",!0)])])}}}),O={install:n=>{n.component("EnhancedPagination",C)}};s.EnhancedPagination=C,s.default=O,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});