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