vue加elementui开发的分页显示
由于我的是公共引入样式表和css表所以，将公共的也写出来了（我接手的项目为基于vue开发的）
公共的index.html
引入js
<script src="{MODULE_URL}static/js/modify.js" type="text/javascript" charset="utf-8"></script>
{MODULE_URL}static/在我的项目下都是这么写的，无论样式表还是css样式表
引入样式表
<link rel="stylesheet" type="text/css" href="{MODULE_URL}static/css/purchase.css?v=2019042001" />
vue的路由js配置页面的js路由（router.js）
,{
path:"/PurchaseRecords",
component:PurchaseRecords
}
新建一个js文件命名
const PurchaseRecords = {
template: `
<div class="demo">
<div class="content" style="height:auto;">
<div class="purchaserecords">
<p>购买记录</p>
</div>
<div class="info">
<input class="daochu"@click="" type="button" value="导出所有参与用户"/>
<div class="title" style="margin-left: 24px;margin-top: 32px;">
<div class="container_table">
<el-table :data="lists.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%;border:none;" :default-sort="{prop: 'date', order: 'descending'}">
<el-table-column prop="userImg" label="用户头像"></el-table-column>
<el-table-column prop="lusername" label="昵称"></el-table-column>
<el-table-column prop="realname" label="真实姓名"></el-table-column>
<el-table-column prop="telnum" label="手机号"></el-table-column>
<el-table-column prop="conum" label="订单号"></el-table-column>
<el-table-column prop="hongb" sortable label="收到红包总金额"></el-table-column>
<el-table-column prop="bmtime" sortable label="报名时间"></el-table-column>
<el-table-column prop="downtime" sortable label="下单时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" v-if="istag" @click=''>删除</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,total" @current-change="current_change" :total=total></el-pagination>
</div>
</div>
</div>
</div>
</div>`,
data() {
return {
total:1000,//默认数据总数
pagesize:10,//每页的数据条数
currentPage:1,//默认开始页面
istag: true,
input:"",
input21: '',
lists: [
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
},
{
"userImg": "img",
"lusername": "南柯残梦",
"realname": "流SIR",
"telnum": "18626131234",
"conum": "2019042112120304586",
"hongb": "22",
"bmtime": "2019-04-21 12:12:12",
"downtime": "2019-04-21 12:12:12"
}
]
,
tableData:[]
};
} ,
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 0) {
return 'th';
}
return '';
},
switchChange(){
this.istag = !this.istag ;
},
created:function(){
this.total=this.lists.length;
},
current_change:function(currentPage){
this.currentPage = currentPage;
}
}
}
数据为写死的data效果为上图
样式表
.el-table td, .el-table th.is-leaf{
border: none !important;
color:black;
}
.el-table--striped .el-table__body tr.el-table__row--striped td{
background-color:#fff;
}
.el-table th>.cell{
font-size:16px !important;
}
.el-table::before{
height: 0px !important;
}
.fy{
margin-top: 25px;
height: 58px;
text-align: center;
}
.el-pager li.active+li {
border-left:1px !important;
}
vue加elementui开发的分页显示的更多相关文章
- elementui el-table根据分页显示表格序号
每页显示的序号都是一样的: <el-table :data="tableData" highlight-current-row @current-change="h ...
- 小程序和Vue利用swiper实现icons分页显示--动态计算
这里发现小程序实现步骤,Vue与之类似 先上效果图: <view class="icons"> <swiper indicator-dots="true ...
- vue、element-ui开发技巧
1.vue下input文本框获得光标 html: <el-input size="mini" clearable v-model.trim="addOrEditDa ...
- vue结合element-ui table本地分页
<template> <el-table :data="tableData1.slice((start1-1)*length1,start1*length1)" ...
- 关于vue+element-ui项目的分页，返回默认显示第一页的问题解决
关于vue+element-ui项目的分页,返回默认显示第一页的问题解决 问题描述 当前页面如下: 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮,返 ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理
在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...
- vue修改elementUI的分页组件视图没更新问题
转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...
- Electron+Vue+ElementUI开发环境搭建
Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...
随机推荐
- js 数组 map方法
https://www.cnblogs.com/xuan52rock/p/4460949.html https://jingyan.baidu.com/article/91f5db1b7453471c ...
- js中的数据类型、以及浅拷贝和深拷贝
一.js中的数据类型 1.基本类型(值类型):Undefined.Boolean.String.Number.Symbol 2.引用类型:函数.数组.对象.null.new Number(10)都是对 ...
- Python【每日一问】12
问:请解释线程.进程.协程 答: [定义] 进程 进程:一个运行的程序(代码)就是一个进程,进程是系统资源分配的最小单位.进程拥有自己独立的内存空间,多个进程间资源不共享 线程 线程:调度执行的最小单 ...
- RESTful levels、HATEOAS
概述: REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fiel ...
- send_keys results in Expected 【object Undefined】undefined to be a string解决方法：更新selenium+geckodriver+firefox
很久之前在win10上配置的测试环境: python 3.6.1+ selenium 3.3.3+ geckodriver 0.15.0以前run case是正常的,今天去run 同样的case时发现 ...
- WordPress版微信小程序2.6版发布
WordPress版微信小程序的完善和升级的工作一直都在进行中,我争取保证一个月可以出一个版本,希望通过一点点的改进,让这个开源产品日趋完美. 同时,pro版WordPress微信小程序也在紧锣密鼓的 ...
- Xilinx FPGA开发随笔
1.UCF文件 1.1.UCF作用 UCF文件主要是完成管脚的约束,时钟的约束, 以及组的约束. 1.2.UCF语法 普通IO口只需约束引脚号和电压: NET "端口名称" LOC ...
- python 常用技巧
一.字符串与数值的转换 Python中字符串转换为数值: str_num = '99' num = int(str_num) 整型数转换为字符串: num = 99 str_num = str(num ...
- 同一台windows下配置安装多个mysql实例，实现主从同步
一.安装多个mysql 参见: https://blog.csdn.net/wrh_csdn/article/details/80198795 https://www.cnblogs.com/qjoa ...
- python ----django---打包重用
https://www.cnblogs.com/wcwnina/p/9122469.html https://blog.csdn.net/qq_30501975/article/details/804 ...