lc-vue-auto-pagination/docs/.vitepress/dist/assets/index.md.00f4bd5c.js

分页组件

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"]]),$=_('<h1 id="lc-vue-auto-pagination" tabindex="-1">lc-vue-auto-pagination <a class="header-anchor" href="#lc-vue-auto-pagination" aria-label="Permalink to &quot;lc-vue-auto-pagination&quot;">​</a></h1><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">npm i lc-vue-auto-pagination</span></span></code></pre></div><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2>',4),R={style:{height:"400px"}},U=_(`<div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">AutoPagination</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">lc-vue-auto-pagination</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">ref</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">onMounted</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> pagination </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#82AAFF;">onMounted</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">pagination</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">goFirstPage</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> fetchData </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">pageNo</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">pageSize</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;">  </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">list</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">张三</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> age</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">李四</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> age</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">19</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> total</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">height: 400px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">AutoPagination</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:fetch-data</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">fetchData</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">pagination</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#C792EA;">default</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">indexMethod</span><span style="color:#89DDFF;">}</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-table</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:data</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">data</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-table-column</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:index</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">indexMethod</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">el-table-column</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-table-column</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">prop</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">姓名</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">el-table-column</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">el-table-column</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">prop</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">age</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">年龄</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">el-table-column</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">el-table</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">AutoPagination</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="api" tabindex="-1">Api <a class="header-anchor" href="#api" aria-label="Permalink to &quot;Api&quot;">​</a></h2><h3 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to &quot;Attributes&quot;">​</a></h3><table><thead><tr><th>属性名</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>fetchData</td><td>数据获取</td><td>(option?:{pageNo:number, pageSize: number})=&gt;{list: any[], total: number }</td><td>() =&gt; ({ list: [], total: 0 })</td></tr><tr><td>pageSizes</td><td>每页数量可选列表</td><td>number[]</td><td>[10, 20, 50, 100]</td></tr><tr><td>defaultPageSize</td><td>默认每页数量</td><td>number</td><td>20</td></tr><tr><td>prePageChanged</td><td>页面切换前校验</td><td>(newVal:number, oldVal:number)=&gt;boolean</td><td>() =&gt; true</td></tr><tr><td>noPagination</td><td>是否无翻页场景</td><td>boolean</td><td>false</td></tr><tr><td>autoInit</td><td>是否自动调用fetchData</td><td>boolean</td><td>false</td></tr></tbody></table><h2 id="slots" tabindex="-1">Slots <a class="header-anchor" href="#slots" aria-label="Permalink to &quot;Slots&quot;">​</a></h2><table><thead><tr><th>插槽名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>default</td><td>自定义内容</td><td>{data:any[], total: number, pageSize: number, currentPage: number, indexMethod: (index: number) =&gt; number }</td></tr></tbody></table><h2 id="exposes" tabindex="-1">Exposes <a class="header-anchor" href="#exposes" aria-label="Permalink to &quot;Exposes&quot;">​</a></h2><table><thead><tr><th>名称</th><th>描述</th><th>类型</th></tr></thead><tbody><tr><td>refresh</td><td>刷新数据</td><td>()=&gt;void</td></tr><tr><td>goFirstPage</td><td>跳转第一页</td><td>()=&gt;void</td></tr><tr><td>goLastPage</td><td>跳转最后一页</td><td>()=&gt;void</td></tr><tr><td>goNextPage</td><td>跳转下一页</td><td>()=&gt;void</td></tr><tr><td>goPrevPage</td><td>跳转前一页</td><td>()=&gt;void</td></tr><tr><td>go</td><td>跳转指定页</td><td>(pageNumber: number) =&gt; void</td></tr></tbody></table>`,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};