vue加elementui开发的分页显示
2024-05-30 22:39:07
由于我的是公共引入样式表和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;
}
转载于:https://www.cnblogs.com/lin-white/p/10788589.html
vue加elementui开发的分页显示相关推荐
- 本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- vue2+element-ui实现表格分页显示
vue2+element-ui实现表格分页显示 添加分页el-pagination 实现分页相关方法 添加分页el-pagination 编辑FundList.vue,给表格添加分页: <tem ...
- vue 加载image图片不显示解决
vue 加载image图片不显示解决------------写了个vue的demo(自己做一个表格,可以横向增加列也可以纵向增加行)想给demo加图片怎么都出不来,,,,,查图片太大?加载位置不对?配 ...
- 2020 Vue 基于Element-UI开发 手动导入并使用Timeline组件（附组件文件）查看快递信息
文章目录 1.引言 2.导入与配置 提供文件: 实现效果: 实现过程: 项目源码: 3.结束语 点击进入Vue❤学习专栏~ 1.引言 寒假是用来反超的!一起来学习Vue把,这篇博客是关于Timelin ...
- vue使用element-ui开发的后台管理系统使用中英文切换多语言国际化方案步骤流程
公司后台管理系统需要使用多语言版本,本次记录使用i18n实现多语言切换的流程步骤: 1.安装工具包 npm install vue-i18n 2.在项目src目录下新建lang文件夹,目录结构如下: ...
- 2020 Vue 基于Element-UI开发 常用模板使用 【整理】
文章目录 1.引言 主界面: 处理区域: 结束语 点击进入Vue❤学习专栏~ 1.引言 最近做Vue项目时,发现很多地方都是相同的,所以可以做成一个简单模板,供自己用,具体界面如下,然后分模块展示代码 ...
- elementui el-table根据分页显示表格序号
每页显示的序号都是一样的: <el-table :data="tableData" highlight-current-row @current-change="h ...
- vue中elementUi筛选后分页页码恢复到第一页
分页查询的时候,在第4页添加筛选条件查询后.返回了新数据,展示的是第一页数据但分页页码还是第四页.正确应为第1页 解决思路:条件筛选后将当前currentPage改为1 1.实现代码 <temp ...
- 浅谈AJAX并实现使用pagehelper-5.1.10.jar分页插件实现异步从数据库中获取数据分页显示
AJAX异步请求 什么是ajax 异步 JavaScript 同步和异步的区别 同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于一个Java线程的操作. 异步方式:浏览器与服务器是并行操作, ...
最新文章
- 与后台交互方法一 ——Ajax
- cmd find 命令 多个 或者 关系 +windows_Chocolatey -Windows系统的yum||apt 软件安装工具...
- 使用hyper-v、CentOS学习Linux基本概念和命令
- Android华容道之一步一步实现-6-还原状态检测
- Ubuntu安装Chrome及hosts修改
- djongo mysql 回滚_django事物回滚
- PHP 入门 - 2.函数
- 学习使用资源文件[2] - Ico
- css块元素与行内元素特点,CSS区分块级元素和行内元素
- 年末巨制：知识图谱嵌入方法研究总结
- 如何在Linux上部署Jenkins
- python字典购物车实现的功能_python购物车功能实现
- postgreSQL数据库里面导入数据
- Red Hat Enterprise Linux上配置SQL Server Always On Availability Group
- 线性表建立学生信息表
- 《Python学习手册》——使用入门
- EdrawMax Crack,多合一的图表应用程序
- 用Matlab筛选mirbase,一种基于miRBase数据库的植物有参的miRNA数据分析方法与流程...
- 智邦国际CRM系统实现企业信息化管理成功实施
- 不刷机，京东云路由进openwrt后台
热门文章
- Python笔记01：字符串的常见操作
- WEEK 15 C ZJM 与纸条
- mvc报错template: “ServletContext resource [/WEB-INF/templates/index.html]“
- 周期训练理论与方法pdf_周期_PDF图书下载_(美) 图德·邦帕 (Tudor O.Bompa) (美)_免费PDF电子书下载_第一图书网...
- R+ECharts2Shiny实现web动态交互式可视化数据(中)
- VS Code + Latex + SumatraPDF 环境（实用）
- 程序员，你得选准买房的时间！
- 论文笔记-高速无人机网络MAC协议
- 10+ 小故事揭秘高频「操作系统面试题」
- 软件测试 前置条件是什么意思,软件测试用例生成中前置条件分析.doc