"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[7300],{97300:function(e,n,a){a.r(n),a.d(n,{default:function(){return E}});var t=a(20641),l=a(90033);const r=e=>((0,t.Qi)("data-v-f89897da"),e=e(),(0,t.jt)(),e),s={class:"lin-container"},o=r((()=>(0,t.Lk)("div",{class:"lin-title"},"Pagination 分页",-1))),i={class:"lin-wrap-ui"},p=r((()=>(0,t.Lk)("div",{slot:"header"},[(0,t.Lk)("span",null,"基础用法")],-1))),g={class:"block"},u=r((()=>(0,t.Lk)("span",{class:"demonstration"},"页数较少时的效果",-1))),d={class:"block",style:{marginTop:"30px"}},c=r((()=>(0,t.Lk)("span",{class:"demonstration"},"大于 7 页时的效果",-1))),h={style:{"white-space":"pre-wrap"}},v=r((()=>(0,t.Lk)("div",{slot:"header"},[(0,t.Lk)("span",null,"设置最大页码按钮数")],-1))),k={style:{"white-space":"pre-wrap"}},b=r((()=>(0,t.Lk)("div",{slot:"header"},[(0,t.Lk)("span",null,"带有背景色的分页")],-1))),C={style:{"white-space":"pre-wrap"}},m=r((()=>(0,t.Lk)("div",{slot:"header"},[(0,t.Lk)("span",null,"小型分页")],-1))),y={style:{"white-space":"pre-wrap"}},z=r((()=>(0,t.Lk)("div",{slot:"header"},[(0,t.Lk)("span",null,"附加功能")],-1))),_={class:"block"},f=r((()=>(0,t.Lk)("span",{class:"demonstration"},"显示总数",-1))),F={class:"block",style:{marginTop:"30px"}},L=r((()=>(0,t.Lk)("span",{class:"demonstration"},"调整每页显示条数",-1))),x={class:"block",style:{marginTop:"30px"}},P=r((()=>(0,t.Lk)("span",{class:"demonstration"},"直接前往",-1))),w={class:"block",style:{marginTop:"30px"}},S=r((()=>(0,t.Lk)("span",{class:"demonstration"},"完整功能",-1))),j={style:{"white-space":"pre-wrap"}},T=r((()=>(0,t.Lk)("div",{slot:"header"},[(0,t.Lk)("span",null,"当只有一页时隐藏分页")],-1))),U={style:{"white-space":"pre-wrap"}};function $(e,n,a,r,$,V){const O=(0,t.g2)("el-pagination"),A=(0,t.g2)("el-row"),E=(0,t.g2)("el-collapse-item"),I=(0,t.g2)("el-collapse"),Q=(0,t.g2)("el-card"),X=(0,t.g2)("el-switch");return(0,t.uX)(),(0,t.CE)("div",s,[o,(0,t.Lk)("div",i,[(0,t.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,t.k6)((()=>[p,(0,t.bF)(A,null,{default:(0,t.k6)((()=>[(0,t.Lk)("div",null,[(0,t.Lk)("div",g,[u,(0,t.bF)(O,{layout:"prev, pager, next",total:50})]),(0,t.Lk)("div",d,[c,(0,t.bF)(O,{layout:"prev, pager, next",total:1e3})])])])),_:1}),(0,t.bF)(I,null,{default:(0,t.k6)((()=>[(0,t.bF)(E,{title:"查看代码",name:"2"},{default:(0,t.k6)((()=>[(0,t.Lk)("div",h,(0,l.v_)($.base),1)])),_:1})])),_:1})])),_:1}),(0,t.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,t.k6)((()=>[v,(0,t.bF)(A,null,{default:(0,t.k6)((()=>[(0,t.bF)(O,{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3})])),_:1}),(0,t.bF)(I,{class:"test",style:{color:"red"}},{default:(0,t.k6)((()=>[(0,t.bF)(E,{title:"查看代码",name:"2"},{default:(0,t.k6)((()=>[(0,t.Lk)("div",k,(0,l.v_)($.pageCount),1)])),_:1})])),_:1})])),_:1}),(0,t.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,t.k6)((()=>[b,(0,t.bF)(A,null,{default:(0,t.k6)((()=>[(0,t.Lk)("div",null,[(0,t.bF)(O,{background:"",layout:"prev, pager, next",total:1e3})])])),_:1}),(0,t.bF)(I,{class:"test",style:{color:"red"}},{default:(0,t.k6)((()=>[(0,t.bF)(E,{title:"查看代码",name:"2"},{default:(0,t.k6)((()=>[(0,t.Lk)("div",C,(0,l.v_)($.background),1)])),_:1})])),_:1})])),_:1}),(0,t.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,t.k6)((()=>[m,(0,t.bF)(A,null,{default:(0,t.k6)((()=>[(0,t.bF)(O,{small:"",layout:"prev, pager, next",total:50})])),_:1}),(0,t.bF)(I,null,{default:(0,t.k6)((()=>[(0,t.bF)(E,{title:"查看代码",name:"2"},{default:(0,t.k6)((()=>[(0,t.Lk)("div",y,(0,l.v_)($.small),1)])),_:1})])),_:1})])),_:1}),(0,t.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,t.k6)((()=>[z,(0,t.bF)(A,null,{default:(0,t.k6)((()=>[(0,t.Lk)("div",_,[f,(0,t.bF)(O,{onSizeChange:V.handleSizeChange,onCurrentChange:V.handleCurrentChange,"current-page":$.currentPage1,"onUpdate:currentPage":n[0]||(n[0]=e=>$.currentPage1=e),"page-size":100,layout:"total, prev, pager, next",total:1e3},null,8,["onSizeChange","onCurrentChange","current-page"])]),(0,t.Lk)("div",F,[L,(0,t.bF)(O,{onSizeChange:V.handleSizeChange,onCurrentChange:V.handleCurrentChange,"current-page":$.currentPage2,"onUpdate:currentPage":n[1]||(n[1]=e=>$.currentPage2=e),"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},null,8,["onSizeChange","onCurrentChange","current-page"])]),(0,t.Lk)("div",x,[P,(0,t.bF)(O,{onSizeChange:V.handleSizeChange,onCurrentChange:V.handleCurrentChange,"current-page":$.currentPage3,"onUpdate:currentPage":n[2]||(n[2]=e=>$.currentPage3=e),"page-size":100,layout:"prev, pager, next, jumper",total:1e3},null,8,["onSizeChange","onCurrentChange","current-page"])]),(0,t.Lk)("div",w,[S,(0,t.bF)(O,{onSizeChange:V.handleSizeChange,onCurrentChange:V.handleCurrentChange,"current-page":$.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},null,8,["onSizeChange","onCurrentChange","current-page"])])])),_:1}),(0,t.bF)(I,null,{default:(0,t.k6)((()=>[(0,t.bF)(E,{title:"查看代码",name:"2"},{default:(0,t.k6)((()=>[(0,t.Lk)("div",j,(0,l.v_)($.methodsCode),1)])),_:1})])),_:1})])),_:1}),(0,t.bF)(Q,{style:{"margin-bottom":"50px"}},{default:(0,t.k6)((()=>[T,(0,t.bF)(A,null,{default:(0,t.k6)((()=>[(0,t.Lk)("div",null,[(0,t.bF)(X,{modelValue:$.value,"onUpdate:modelValue":n[3]||(n[3]=e=>$.value=e)},null,8,["modelValue"]),(0,t.bF)(O,{"hide-on-single-page":$.value,total:5,layout:"prev, pager, next"},null,8,["hide-on-single-page"])])])),_:1}),(0,t.bF)(I,null,{default:(0,t.k6)((()=>[(0,t.bF)(E,{title:"查看代码",name:"2"},{default:(0,t.k6)((()=>[(0,t.Lk)("div",U,(0,l.v_)($.hideOnSinglePage),1)])),_:1})])),_:1})])),_:1})])])}var V={name:"",components:{},data(){return{value:!1,currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4,base:' \n <div class="block">\n <span class="demonstration">页数较少时的效果</span>\n <el-pagination\n layout="prev, pager, next"\n :total="50">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">大于 7 页时的效果</span>\n <el-pagination\n layout="prev, pager, next"\n :total="1000">\n </el-pagination>\n </div>',pageCount:'\n <el-pagination\n :page-size="20"\n :pager-count="11"\n layout="prev, pager, next"\n :total="1000">\n </el-pagination>',background:'\n <el-pagination\n background\n layout="prev, pager, next"\n :total="1000">\n </el-pagination>',small:'\n <el-pagination\n small\n layout="prev, pager, next"\n :total="50">\n </el-pagination>\n ',methodsCode:'\n <template>\n <div class="block">\n <span class="demonstration">显示总数</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage1"\n :page-size="100"\n layout="total, prev, pager, next"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">调整每页显示条数</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage2"\n :page-sizes="[100, 200, 300, 400]"\n :page-size="100"\n layout="sizes, prev, pager, next"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">直接前往</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page.sync="currentPage3"\n :page-size="100"\n layout="prev, pager, next, jumper"\n :total="1000">\n </el-pagination>\n </div>\n <div class="block">\n <span class="demonstration">完整功能</span>\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page="currentPage4"\n :page-sizes="[100, 200, 300, 400]"\n :page-size="100"\n layout="total, sizes, prev, pager, next, jumper"\n :total="400">\n </el-pagination>\n </div>\n </template>\n <script>\n export default {\n methods: {\n handleSizeChange(val) {\n console.log(`每页 ${val} 条`)\n },\n handleCurrentChange(val) {\n console.log(`当前页: ${val}`)\n }\n },\n data() {\n return {\n currentPage1: 5,\n currentPage2: 5,\n currentPage3: 5,\n currentPage4: 4\n };\n }\n }\n <\/script>',hideOnSinglePage:'\n <div>\n <el-switch v-model="value">\n </el-switch>\n <el-pagination\n :hide-on-single-page="value"\n :total="5"\n layout="prev, pager, next">\n </el-pagination>\n </div>\n <script>\n export default {\n data() {\n return {\n value: false\n }\n }\n }\n <\/script>\n '}},computed:{},watch:{},mounted(){this.init()},methods:{handleSizeChange(e){console.log(`每页 ${e} 条`)},handleCurrentChange(e){console.log(`当前页: ${e}`)},init(){}}},O=a(66262);const A=(0,O.A)(V,[["render",$],["__scopeId","data-v-f89897da"]]);var E=A}}]);
|
