AI导航网

技术频道

公众号推荐

微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

vue加elementui开发的分页显示

时间：2022-10-08分类：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>  </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; }

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

elementUI 页面刷新菜单定位

el-menu 有个属性 :default-active="curActive" el-menu-item有个属性:index=“home”这2个属性值对上号就自动定位了data(){ return{ curActive:"home" }; },

作者：编程之家时间：2022-10-08

elementUI 学习入门之 input 输入框

基础用法1<el-inputv-model="input1"palcehoder="请输入"></el-input>23varMain={4data(){5return{6input1:''7}8}9}10varCtor=Vue.extend(Main)11newCtor().$mount('...

作者：编程之家时间：2022-10-08

在electron-vue项目中使用element-ui

1.安装element-uinpminstallelement-ui-S 2.在main.js中importElementUIfrom'element-ui'import'element-ui/libheme-chalk/index.css'Vue.use(ElementUI)注意index.css的路径不要出错：在nod...

作者：编程之家时间：2022-10-08

elementUI 学习入门之 layout 布局

layout布局通过基础的24分栏，可进行快速布局基础布局使用单一分栏创建基础的栅格布局,通过span属性指定每栏的大小<el-col:span="8"></el-col>1<el-row>2<el-col:span="8"...

作者：编程之家时间：2022-10-08

ElementUI之DatePicker日期选择器小细节

今天做一个选择年份的功能，直接调用了ElementUI里面的DatePicker组件，官网上有该组件的用法介绍，讲得很清楚。我的代码：官网说明：奇怪的事情发生了，我明明按照例子写了 value-format="yyyy&quo...

作者：编程之家时间：2022-10-08

elementui 日期控件设置选择范围

that.end 即为结束日期

作者：编程之家时间：2022-10-08

vue elementUi tree 懒加载使用详情

vueelementUitree懒加载使用详情2018年11月21日11:17:04开心大表哥阅读数：3513 https://blog.csdn.net/a419419/article/details/84315751 背景：vue下使用elementUI文档：http://element-cn.eleme.io/#/zh-CN/com...

作者：编程之家时间：2022-10-08

angular4入门 angluar与elementUI环境搭建、路由配置、get请求运用

环境搭建说明：1、全局安装angluar脚手架npminstall-g@angular/cli2、初始化项目（支持scss）ngnew项目名称--style=scss//进入项目cd项目名称运行代码可以是：serve或者npminstall(安装依赖)npmstart（运行）3、安装...

作者：编程之家时间：2022-10-08

在项目中遇见的问题vue+elementUI

1、在写埋点监控项目的时候，需求是表格里面的数据后台传递过来为0，但是要求显示的时候为—，在elementUI判断，将prop去掉在下面加上<templateslot-scope="scope"><emplate>里面在写vue的判断...

作者：编程之家时间：2022-10-08

filter-method 在elementUI 表格中的使用

<el-table-columnprop="pubArea"//表格data中对应的字段column-key="pubArea"//过滤条件变化时根据此key判断是哪个表头的过滤label="报修类型"align="center"width=

作者：编程之家时间：2022-10-08