element ui分页怎么做_Vue Element分页器
生活随笔
收集整理的這篇文章主要介紹了
element ui分页怎么做_Vue Element分页器
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>分頁(yè)</title><!-- 引入Element的CSS文件,網(wǎng)絡(luò)路徑 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style type="text/css">body {background: #409EFF;}.top {margin: 50px auto 0;width: 1000px;height: 500px;background: pink;overflow: hidden;}.bottom {width: 1000px;text-align: center;margin: 20px auto 0;}.div p {list-style-type: none;height: 80px;line-height: 80px;border-bottom: 4px double blue;font-size: 40px;margin-left: 20px;}.span {display: inline-block;width: 40px;height: 40px;background: white;}/*清除橫向滾動(dòng)條*/.el-scrollbar__wrap{overflow-x: hidden;}</style> </head><body><div id="app"><div class="top"><!--添加element滾動(dòng)條--><el-scrollbar class="scrol" style="height:100%;"><div class="div"><!--利用數(shù)組的slice方法動(dòng)態(tài)顯示數(shù)據(jù)--><p v-for="item in Array.slice((currentPage-1)*pagesize,currentPage*pagesize)"><span class="span"></span>{{item.name}}</p></div></el-scrollbar></div><div class="bottom"><!-- 分頁(yè)器組件 current-page: 當(dāng)前所在的頁(yè)面數(shù)(第幾頁(yè)), page-sizes:一個(gè)數(shù)組選擇頁(yè)面顯示幾條數(shù)據(jù), page-size:當(dāng)前頁(yè)面顯示幾條數(shù)據(jù), total:總共有多少條數(shù)據(jù), @size-change:page-size改變時(shí)觸發(fā)的函數(shù), @current-change:current-page改變時(shí)觸發(fā)的函數(shù) --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 12, 15]":page-size="pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div></body><!-- 引入vue --><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><!-- 引入Element的JS文件,網(wǎng)絡(luò)路徑 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script type="text/javascript">var app = new Vue({el: '#app',data:{//數(shù)據(jù)Array: [{name:"張飛"},{name:"關(guān)羽"},{name:"劉備"},{name:"趙云"},{name:"曹操"},{name:"諸葛亮"},{name:"周瑜"},{name:"亞索"},{name:"蓋倫"},{name:"諾克薩斯"},{name:"傲之追獵者"},{name:"發(fā)條"},{name:"火男"},{name:"男刀"},{name:"扭曲樹(shù)精"},{name:"齊天大圣"},{name:"暮光之眼"},{name:"德邦總管"},{name:"無(wú)極劍圣"},{name:"戲命師"},{name:"皎月女神"},{name:"魔蛇之擁"},{name:"黑暗元首"},{name:"影流之鐮"},{name:"北地之怒"},{name:"武器大師"},],arr: [],//頁(yè)面顯示幾條數(shù)據(jù)pagesize: 5,//數(shù)據(jù)量total: 400,//當(dāng)前頁(yè)currentPage: 1,},methods:{
// pagesize 改變時(shí)會(huì)觸發(fā)handleSizeChange(val) {
// 當(dāng)pagesize改變時(shí)重新賦值this.pagesize = val;},
// currentPage 改變時(shí)會(huì)觸發(fā)handleCurrentChange(val) {
// 當(dāng)currentPage改變時(shí)重新賦值this.currentPage = val;}},mounted(){
// 給總數(shù)據(jù)量total賦值this.total = this.Array.length;}});</script>
</html>
總結(jié)
以上是生活随笔為你收集整理的element ui分页怎么做_Vue Element分页器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： pxe装机dhcp获取不到_小白三步装机
- 下一篇： vue自定义指令封装节流_Vue自定义指