element ui分页怎么做_Vue Element分页器
生活随笔
收集整理的這篇文章主要介紹了
element ui分页怎么做_Vue Element分页器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>分頁</title><!-- 引入Element的CSS文件,網絡路徑 --><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;}/*清除橫向滾動條*/.el-scrollbar__wrap{overflow-x: hidden;}</style> </head><body><div id="app"><div class="top"><!--添加element滾動條--><el-scrollbar class="scrol" style="height:100%;"><div class="div"><!--利用數組的slice方法動態顯示數據--><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"><!-- 分頁器組件 current-page: 當前所在的頁面數(第幾頁), page-sizes:一個數組選擇頁面顯示幾條數據, page-size:當前頁面顯示幾條數據, total:總共有多少條數據, @size-change:page-size改變時觸發的函數, @current-change:current-page改變時觸發的函數 --><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文件,網絡路徑 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script type="text/javascript">var app = new Vue({el: '#app',data:{//數據Array: [{name:"張飛"},{name:"關羽"},{name:"劉備"},{name:"趙云"},{name:"曹操"},{name:"諸葛亮"},{name:"周瑜"},{name:"亞索"},{name:"蓋倫"},{name:"諾克薩斯"},{name:"傲之追獵者"},{name:"發條"},{name:"火男"},{name:"男刀"},{name:"扭曲樹精"},{name:"齊天大圣"},{name:"暮光之眼"},{name:"德邦總管"},{name:"無極劍圣"},{name:"戲命師"},{name:"皎月女神"},{name:"魔蛇之擁"},{name:"黑暗元首"},{name:"影流之鐮"},{name:"北地之怒"},{name:"武器大師"},],arr: [],//頁面顯示幾條數據pagesize: 5,//數據量total: 400,//當前頁currentPage: 1,},methods:{
// pagesize 改變時會觸發handleSizeChange(val) {
// 當pagesize改變時重新賦值this.pagesize = val;},
// currentPage 改變時會觸發handleCurrentChange(val) {
// 當currentPage改變時重新賦值this.currentPage = val;}},mounted(){
// 給總數據量total賦值this.total = this.Array.length;}});</script>
</html>
總結
以上是生活随笔為你收集整理的element ui分页怎么做_Vue Element分页器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pxe装机dhcp获取不到_小白三步装机
- 下一篇： html5倒计时秒杀怎么做,vue 设