(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-b0832fe0"],{"89b8":function(e,a,n){},e636:function(e,a,n){"use strict";n.r(a);var t=function(){var e=this,a=e.$createElement,n=e._self._c||a;return n("div",{staticClass:"lin-container"},[n("div",{staticClass:"lin-title"},[e._v("Pagination 分页")]),n("div",{staticClass:"lin-wrap-ui"},[n("el-card",{staticStyle:{"margin-bottom":"50px"}},[n("div",{attrs:{slot:"header"},slot:"header"},[n("span",[e._v("基础用法")])]),n("el-row",[n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("页数较少时的效果")]),n("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),n("div",{staticClass:"block",style:{marginTop:"30px"}},[n("span",{staticClass:"demonstration"},[e._v("大于 7 页时的效果")]),n("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])]),n("el-collapse",[n("el-collapse-item",{attrs:{title:"查看代码",name:"2"}},[n("div",{staticStyle:{"white-space":"pre-wrap"}},[e._v(e._s(e.base))])])],1)],1),n("el-card",{staticStyle:{"margin-bottom":"50px"}},[n("div",{attrs:{slot:"header"},slot:"header"},[n("span",[e._v("设置最大页码按钮数")])]),n("el-row",[n("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1),n("el-collapse",{staticClass:"test",staticStyle:{color:"red"}},[n("el-collapse-item",{attrs:{title:"查看代码",name:"2"}},[n("div",{staticStyle:{"white-space":"pre-wrap"}},[e._v(e._s(e.pageCount))])])],1)],1),n("el-card",{staticStyle:{"margin-bottom":"50px"}},[n("div",{attrs:{slot:"header"},slot:"header"},[n("span",[e._v("带有背景色的分页")])]),n("el-row",[n("div",[n("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)]),n("el-collapse",{staticClass:"test",staticStyle:{color:"red"}},[n("el-collapse-item",{attrs:{title:"查看代码",name:"2"}},[n("div",{staticStyle:{"white-space":"pre-wrap"}},[e._v(e._s(e.background))])])],1)],1),n("el-card",{staticStyle:{"margin-bottom":"50px"}},[n("div",{attrs:{slot:"header"},slot:"header"},[n("span",[e._v("小型分页")])]),n("el-row",[n("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),n("el-collapse",[n("el-collapse-item",{attrs:{title:"查看代码",name:"2"}},[n("div",{staticStyle:{"white-space":"pre-wrap"}},[e._v(e._s(e.small))])])],1)],1),n("el-card",{staticStyle:{"margin-bottom":"50px"}},[n("div",{attrs:{slot:"header"},slot:"header"},[n("span",[e._v("附加功能")])]),n("el-row",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("显示总数")]),n("el-pagination",{attrs:{"current-page":e.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange,"update:currentPage":function(a){e.currentPage1=a},"update:current-page":function(a){e.currentPage1=a}}})],1),n("div",{staticClass:"block",style:{marginTop:"30px"}},[n("span",{staticClass:"demonstration"},[e._v("调整每页显示条数")]),n("el-pagination",{attrs:{"current-page":e.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange,"update:currentPage":function(a){e.currentPage2=a},"update:current-page":function(a){e.currentPage2=a}}})],1),n("div",{staticClass:"block",style:{marginTop:"30px"}},[n("span",{staticClass:"demonstration"},[e._v("直接前往")]),n("el-pagination",{attrs:{"current-page":e.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange,"update:currentPage":function(a){e.currentPage3=a},"update:current-page":function(a){e.currentPage3=a}}})],1),n("div",{staticClass:"block",style:{marginTop:"30px"}},[n("span",{staticClass:"demonstration"},[e._v("完整功能")]),n("el-pagination",{attrs:{"current-page":e.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange}})],1)]),n("el-collapse",[n("el-collapse-item",{attrs:{title:"查看代码",name:"2"}},[n("div",{staticStyle:{"white-space":"pre-wrap"}},[e._v(e._s(e.methodsCode))])])],1)],1),n("el-card",{staticStyle:{"margin-bottom":"50px"}},[n("div",{attrs:{slot:"header"},slot:"header"},[n("span",[e._v("当只有一页时隐藏分页")])]),n("el-row",[n("div",[n("el-switch",{model:{value:e.value,callback:function(a){e.value=a},expression:"value"}}),n("el-pagination",{attrs:{"hide-on-single-page":e.value,total:5,layout:"prev, pager, next"}})],1)]),n("el-collapse",[n("el-collapse-item",{attrs:{title:"查看代码",name:"2"}},[n("div",{staticStyle:{"white-space":"pre-wrap"}},[e._v(e._s(e.hideOnSinglePage))])])],1)],1)],1)])},l=[],r={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(e){console.log("每页 ".concat(e," 条"))},handleCurrentChange:function(e){console.log("当前页: ".concat(e))},init:function(){}}},s=r,i=(n("ea55"),n("2877")),o=Object(i["a"])(s,t,l,!1,null,"254afb18",null);a["default"]=o.exports},ea55:function(e,a,n){"use strict";var t=n("89b8"),l=n.n(t);l.a}}]);