由于我的是公共引入样式表和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开发的分页显示的更多相关文章

  1. elementui el-table根据分页显示表格序号

    每页显示的序号都是一样的: <el-table :data="tableData" highlight-current-row @current-change="h ...

  2. 小程序和Vue利用swiper实现icons分页显示--动态计算

    这里发现小程序实现步骤,Vue与之类似 先上效果图: <view class="icons"> <swiper indicator-dots="true ...

  3. vue、element-ui开发技巧

    1.vue下input文本框获得光标 html: <el-input size="mini" clearable v-model.trim="addOrEditDa ...

  4. vue结合element-ui table本地分页

    <template> <el-table :data="tableData1.slice((start1-1)*length1,start1*length1)" ...

  5. 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决

    关于vue+element-ui项目的分页,返回默认显示第一页的问题解决     问题描述 当前页面如下: 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮,返 ...

  6. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  7. 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

    在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...

  8. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  9. Electron+Vue+ElementUI开发环境搭建

    Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...

随机推荐

  1. JVM垃圾回收器

    JVM堆内存 -Xms和-Xmx:用于设置堆内存的大小 -XX:NewSize和-XX:MaxNewSize :用于设置年轻代的大小,建议设为整个堆大小的1/3或者1/4,两个值设为一样大. -XX: ...

  2. 我的第二本译作《精通OpenStack》上架啦:前言、目录和样章

    1. 前言 今天,随着新功能和子项目的增加,OpenStack已成为一个不断扩展的大型开源项目.随着数以百计大型企业采用并不断为OpenStack生态系统做出贡献,OpenStack必将成为下一代私有 ...

  3. python with as的用法

    With语句是什么? 有一些任务,可能事先需要设置,事后做清理工作.对于这种场景,Python的with语句提供了一种非常方便的处理方式.一个很好的例子是文件处理,你需要获取一个文件句柄,从文件中读取 ...

  4. 安装Git Bash图文教程

    1.下载Git Bash,下载地址 https://pan.baidu.com/s/1sllsi0d 2.双击Git-2.9.2-64-bit.exe,运行,进行安装:点击“Next” 3.设置安装路 ...

  5. Win 10更新版1709有哪些新功能值得关注!

    windows 10秋季创意者更新版1709发布已经有段时间了,也有很多用户选择升级这次更新的系统.那么,这次Win 10 更新版1709有哪些新功能值得关注呢?下面,一起随主机吧来看一看吧! 1. ...

  6. 在VS2015中用C++编写可被C#调用的DLL

    VS2015用C++创建动态库DLL步骤如下: (1)启动VS2015-->文件-->新建-->项目,按图二进行选择,选择Win32项目,弹出创建窗口,如第二张图.注意.net版本根 ...

  7. MIUI6系统详细卡刷开发版获得root权限的经验

    小米的手机不同手机型号通常情况miui论坛都提供两个不同的版本,分别为稳定版和开发版,稳定版没有提供ROOT权限管理,开发版中就开启了ROOT权限,很多情况下我们需要使用的一些功能强大的App,都需要 ...

  8. koa-passport实现本地验证

    安装 yarn add koa-passport passport-local 先看下passport.js登录策略,判断用户和密码 const passport = require('koa-pas ...

  9. POI导入demo

    前言 使用上篇博文的导入方法,写一个简单的导入demo.其实有了工具类之后就没啥难度了,也就只简单的拿数据.先写个简单的,然后想办法实现动态读取吧,这样读取其实还是比较烦的,每次该模板都要改代码,说到 ...

  10. <iframe width="250" height="250" src="http://www.baidu.com"></iframe>

     <iframe width="250" height="250" src="http://www.baidu.com">< ...