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分页器相关推荐

element ui分页怎么做_vue+element-ui的分页完整版
页面展示: vue组件中代码: @size-change="handleSizeChange" @current-change="handleCurrentChange& ...
element ui分页怎么做_elementUI实现分页
分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但数据量不能太大,因为前端是先一次性加载所有数据, ...
element ui分页怎么做_element ui里面table分页,页数从0开始的怎么做？
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
vue：element ui分页改变pageSize，触发两次回调请求
1.描述: 使用element pagination组件时,如果你的currentPage在靠后的页数,这时改变pageSize,那么可能导致size-change和current-change事件同 ...
element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
element vue 上传模板_vue+element 文件上传
一.前言 element ui 已经提供了文件上传的组件,直接拿来就能用.具有以下几个特点: 限制文件上传的个数,多个文件会发起多个请求. 可以设置文件选择后自动上传或者手动触发上传,并且手动触发可以 ...
安装 Element UI 3.0 （即 Element UI Plus）正确方法
首先官网推荐的安装方法没有生成dist文件,导致样式表等这些文件并没有生成 npm install element-plus --save 以上方法是有问题的,如果不幸执行了上面的命令,那么先执行卸载 ...
element UI 出现错误提示：[Element Migrating][ElDialog][Attribute]: size is removed.
element UI 某些属性已经删除不再使用了删除 el-dialog 中的size 属性即可

element ui分页怎么做_Vue Element分页器

element ui分页怎么做_Vue Element分页器相关推荐

最新文章

热门文章