"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}}]);
//# sourceMappingURL=7300.6fef2898.js.map