vue+element-ui 实现分页（根据el-table内容变换的分页）
官方例子
官方提示：
设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示显示页码总数，size用于设置每页显示的页码数量。
<div class="block">
<span class="demonstration">页数较少时的效果</span>
<el-pagination
layout="prev, pager, next"
:total="50">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">大于 7 页时的效果</span>
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
效果截图如下
我自己的项目中用到了el-table 索性完全贴出来了： 先贴代码
<template>
<div class="title">
<span>总数量：3223个</span>
<el-button icon="el-icon-setting" class="fl">操作</el-button>
<el-select v-model="value5" multiple placeholder="标记" class="fl">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value5" multiple placeholder="筛选项" class="fl">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="demo-input-suffix fl">
<el-input
placeholder="请输入APP名称或运营商名称"
prefix-icon="el-icon-search"
v-model="input21">
</el-input>
</div>
<div class="container_table">
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
stripe
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="appname"
label="APP名称"
sortable
width="180">
</el-table-column>
<el-table-column
prop="apkname"
label="包名"
width="180">
</el-table-column>
<el-table-column
prop="type"
sortable
label="类型">
</el-table-column>
<el-table-column
prop="comp_name"
sortable
label="运营企业名称">
</el-table-column>
<el-table-column
prop="type_number"
label="版本号">
</el-table-column>
<el-table-column
prop="update_date"
sortable
label="更新时间">
</el-table-column>
<el-table-column
prop="download_num"
sortable
label="下载量（万）">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!--<el-button type="warning" icon="el-icon-star-off" circle></el-button>-->
<el-button type="primary" icon="el-icon-star-on" v-if="istag" @click='switchChange'></el-button>
<el-button type="primary" icon="el-icon-star-off" v-else="!istag" @click='switchChange'></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination class="fy"
layout="prev, pager, next"
@current-change="current_change"
:total="total"
background
>
</el-pagination>
</div>
</div>
</template>
js部分（为展示分页效果，所以data里数据较长，耐心点找，哈哈）
<script>
export default {
name:'list11',
data() {
return {
total:1000,//默认数据总数
pagesize:9,//每页的数据条数
currentPage:1,//默认开始页面
istag: true,
input:"",
input21: '',
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value5: [],
tableData: [
{
appname: '1喵喵直播',
apkname: '1bdkdl',
type: '3视频直播',
comp_name: '1广大科技公司',
type_number: '1V1.2',
update_date: '12016-05-02',
download_num: '123.6'
},
{
appname: '2喵喵直播',
apkname: '2bdkdl',
type: '2视频直播',
comp_name: '2广大科技公司',
type_number: '2V1.2',
update_date: '22016-05-02',
download_num: '223.6'
},
{
appname: '3喵喵直播',
apkname: '1bdkdl',
type: '3视频直播',
comp_name: '3广大科技公司',
type_number: '3V1.2',
update_date: '32016-05-02',
download_num: '323.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
{
appname: '4喵喵直播',
apkname: '4bdkdl',
type: '4视频直播',
comp_name: '4广大科技公司',
type_number: '4V1.2',
update_date: '42016-05-02',
download_num: '423.6'
},
]
};
} ,
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 0) {
return 'th';
}
return '';
},
switchChange(){
this.istag = !this.istag ; }, current_change:function(currentPage){
this.currentPage = currentPage;
}
},
created:function(){
this.total=this.tableData.length;
},
};
</script>
css样式部分（可忽略）
<style>
.fl{
float: right;
margin-right:20px;
}
.fy{
text-align:center;
margin-top:30px;
}
.title{
height:100%;
}
</style>
到这里，效果已经出来了，直接上图，点击页码 table内容已经绑定
下面我们来分析代码，table不谈，这里主要讨论分页部分，
首页是给el-table部分绑定数据：如图
js部分的变动：
，
不懂total pagesize currentPage作用的可以看下文档，来回调下值试试，我上面也作了注释。
至此，分页与el-table的绑定完成，当然实际项目中 上面的data数据值都要通过后台异步加载的，这里主要为了展示方便，更多的问题可以留言一起讨论。
vue+element-ui 实现分页（根据el-table内容变换的分页）的更多相关文章
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头，提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减，切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
随机推荐
- 路由Vue-router 的使用总结
1.关于 router-view 匹配 vue 项目使用 vue-router,所有的根级别的路由都是在 App.vue 文件中的 router-view 中渲染的.比如下面的 path: '/' . ...
- php选择文件夹上传
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- C#在WinForm开发中Label换行方法
很多朋友都会在开发WinForm中遇到Label要显示的内容太长,但却不能换行的问题.这里我总结了几种方法,供大家参考. 第一种是把Label的AutoSize属性设为False,手动修改Label的 ...
- 提高Service优先级
在onStartCommand()方法中开启一个通知,提高进程的优先级.注意:从Android 8.0(API级别26)开始,所有通知必须要分配一个渠道,对于每个渠道,可以单独设置视觉和听觉行为.然后 ...
- 电脑如何连接windows server服务器
第一步:win+r 启动‘运行’,输入mstsc 第二步:连接远程桌面,输入服务器ip 第三步,输入账户密码,登陆即可. 注释:mstsc,全称 Microsoft Telnet Screen Con ...
- JS对象、原型、this学习总结
1.对象是函数创建的,而函数却又是一种对象.(属性的集合) 2.每个函数都有一个属性叫做prototype.这个prototype的属性值是一个对象,默认的只有一个constructor的属性,指向这 ...
- Aliyun mysql配置 远程访问 10038
环境 centos7.2 mysql5.7 网上搜了好多的文章,有的说在/etc/my.cnf 注释掉bind-address = 127.0.0.1 ,也开启了3306端口的防火墙,也添加了远 ...
- jenkins持续集成、插件以及凭据
Jenkins介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins功能包括: ...
- Git是目前世界上最先进的分布式版本控制系统（没有之一）。
http://zhidao.baidu.com/link?url=NSYPiSvtGTMoqMA9vt68FRRF8WbfYVmwWeMh47_2lkp0K3jFMl--1Co1tg1R4VshTQV ...
- [Python3] 023 面向对象 第三弹
目录 7. 类相关函数 8. 类的成员描述符(属性) 9. 类的内置属性 10. 类的常用魔术方法 10.1 操作类 10.2 描述符 10.3 属性操作 10.4 运算分类相关魔术方法 接上一篇 [ ...