废话不多,效果如图:

LineSource.vue文件内代码如下:

<template>
    <div class="c-main auth userControl">
        <h3>线路资源</h3>
        <el-table :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)" border style="width: 100%">
            <el-table-column type="index" label="序号">
            </el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.image" width="40" height="40"/>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="goodsId" label="ID">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            :total="list.length"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange">
        </el-pagination>
    </div>
</template>
<script>
    import axios from 'axios';
    axios.defaults.baseURL = 'https://www.easy-mock.com/mock/5ae417e4985d63275b55e177/luckLin';
    axios.defaults.timeout = 20000;
    export default {
        data () {
            return {
                msg: 8888,
                list: [],
                pagesize: 10,
                currpage: 1
            };
        },
        methods: {
            getlist () {
                let starttime = new Date();
                axios.get('/mockDrink').then(data => {
                    console.log(new Date() - starttime);
                    this.list = data.data.data;
                }).catch(err => {
                    console.error(err);
                    window.alert('请求超时,刷新重试!');
                });
            },
            handleCurrentChange (cpage) {
                this.currpage = cpage;
            },
            handleSizeChange (psize) {
                this.pagesize = psize;
            }
        },
        mounted () {
            this.getlist();
        }
    };
</script>

搞定收工!

vue+axios+easy-mock+element-ui实现表格分页功能的更多相关文章

  1. element ui设置表格表头高度和每一行的高度

    填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...

  2. 如何用angularjs制作一个完整的表格之二__表格分页功能

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. element UI实现表格中添加开关控制按钮

    我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...

  5. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  6. element UI 调整表格行高

    使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...

  7. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  8. vue中,使用element ui的弹窗与echarts之间的问题

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就 ...

  9. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  10. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

随机推荐

  1. CodeCraft-19 and Codeforces Round #537 (Div. 2) C. Creative Snap 分治

    Thanos wants to destroy the avengers base, but he needs to destroy the avengers along with their bas ...

  2. bootsafe64 ev.sys

    Win10 安装了驱动精灵之后,直接蓝屏,再次重启,出现: 采用PE启动盘进入系统,之后将C:\WINDOWS\system32\drivers下kavbootc.sys文件删除了,重启之后就可以进入 ...

  3. jQuery Validate验证框架详解(jquery.validate.min.js)

    原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...

  4. 图解SQL Server 2008入门必会

    图解SQL Server 2008入门必会   https://jingyan.baidu.com/article/656db918eded1ee381249c0b.html 图解SQL Server ...

  5. struts2学习笔记(一)—— struts2介绍及入门程序

    一.struts2概述 1.1 什么是struts2? 在介绍Struts2之前,先来认识一下Struts1.Struts1是最早的基于MVC模式的轻量级web框架,他能够合理的划分代码结构,并包含了 ...

  6. python学习之路---day12

    生成器和生成器表达式一:生成器 生成器实质上就是迭代器. 三种方式获取生成器: 01:通过生成器函数 02:通过各种推导式实现生成器 03:通过数据的转换也可以获取生成器 eg:普通函数 def fu ...

  7. Android SharedPreferences应用实例(记录App的使用次数)

    1.介绍 2.使用方法 3.java后台 package com.lucky.test46sharedpreferences_apply; import android.content.SharedP ...

  8. spring boot 自定义静态资源 位置..

    upload-path: E:/upload # 上传文件夹. upload-key: 72b3158c-a0f3-11e8-98d0-529269fb1459 # 定义上传的 key . sprin ...

  9. 【算法笔记】B1030 完美数列(三种方法)

    1030 完美数列 (25 分) 给定一个正整数数列,和正整数 p,设这个数列中的最大值是 M,最小值是 m,如果 M≤mp,则称这个数列是完美数列. 现在给定参数 p 和一些正整数,请你从中选择尽可 ...

  10. Mutation and Iteration

    avoid mutating a list as you are iterating over it 代码: def remove_dups(L1,L2): for e in L1: if e in ...