lc-vue-auto-pagination
Version:
2 lines (1 loc) • 3.1 kB
JavaScript
import{d as x,h as r,w as q,p as v,D as g,a2 as E,o as d,c as u,a3 as S,r as z,G as D,C as k,X as N,_ as T,z as w,B as h,b as M,O as _}from"./chunks/framework.cbc8e229.js";const I={class:"auto-pagination"},V={class:"auto-pagination_data-container"},B={key:0,class:"auto-pagination_main"},L=x({__name:"auto-pagination",props:{fetchData:{type:Function,default:()=>({list:[],total:0})},pageSizes:{type:Array,default:()=>[10,20,50,100]},defaultPageSize:{type:Number,default:20},prePageChanged:{type:Function,default:()=>!0},noPagination:{type:Boolean,default:!1},autoInit:{type:Boolean,default:!1}},setup(F,{expose:y}){const e=F,t=r(0),n=r(e.defaultPageSize),a=r(1),c=r([]),p=r(!1),i=r(1);q(()=>a.value,async(s,o)=>{if(i.value===s)return;await e.prePageChanged(s,o)===!0?(i.value=s,l()):a.value=o}),v(()=>{e.autoInit===!0&&C()});const f=s=>(a.value-1)*n.value+s+1,b=s=>{n.value=s,l()},l=async()=>{if(p.value=!0,e.noPagination===!1){let{list:s,total:o}=await e.fetchData({pageNo:a.value,pageSize:n.value});if(s.length>0||a.value===1)c.value=[],await N(),c.value=s,t.value=o,p.value=!1;else{if(a.value*n.value<=o)throw p.value=!1,new Error("接口返回数据异常");a.value=Math.ceil(o/n.value),l()}}else{let{list:s}=await e.fetchData();c.value=s,p.value=!1}},C=()=>{l()};return y({refresh:C,goFirstPage:()=>{a.value=1,l()},goLastPage:()=>{a.value=Math.ceil(t.value/n.value),l()},goNextPage:()=>{Math.ceil(t.value/n.value)===a.value?console.warn("已经是最后一页"):(a.value=a.value+1,l())},goPrevPage:()=>{a.value===1?console.warn("已经在第一页"):(a.value=a.value-1,l())},go:s=>{if(s===a.value){console.warn("已经在当前页");return}s>Math.ceil(t.value/n.value)?a.value=Math.ceil(t.value/n.value):a.value=s,l()}}),(s,o)=>{const A=g("el-pagination"),m=E("loading");return d(),u("div",I,[S((d(),u("div",V,[z(s.$slots,"default",{data:c.value,total:t.value,pageSize:n.value,currentPage:a.value,indexMethod:f},void 0,!0)])),[[m,p.value]]),F.noPagination===!1?(d(),u("div",B,[D(A,{"current-page":a.value,"onUpdate:currentPage":o[0]||(o[0]=P=>a.value=P),background:"","page-sizes":F.pageSizes,"page-size":n.value,layout:"total, sizes, prev, pager, next",total:t.value,small:"","onUpdate:pageSize":b},null,8,["current-page","page-sizes","page-size","total"])])):k("",!0)])}}});const O=T(L,[["__scopeId","data-v-35710e39"]]),$=_("",4),R={style:{height:"400px"}},U=_("",8),W=JSON.parse('{"title":"lc-vue-auto-pagination","description":"","frontmatter":{},"headers":[],"relativePath":"index.md"}'),j={name:"index.md"},Y=Object.assign(j,{setup(F){const y=r();v(()=>{y.value.goFirstPage()});const e=({pageNo:t,pageSize:n})=>({list:[{name:"张三",age:18},{name:"李四",age:19}],total:100});return(t,n)=>{const a=g("el-table-column"),c=g("el-table");return d(),u("div",null,[$,w("div",R,[D(M(O),{"fetch-data":e,ref_key:"pagination",ref:y},{default:h(({data:p,indexMethod:i})=>[D(c,{data:p},{default:h(()=>[D(a,{type:"index",index:i},null,8,["index"]),D(a,{prop:"name",label:"姓名"}),D(a,{prop:"age",label:"年龄"})]),_:2},1032,["data"])]),_:1},512)]),U])}}});export{W as __pageData,Y as default};