vue+axios+easy-mock+element-ui实现表格分页功能
废话不多,效果如图:
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实现表格分页功能的更多相关文章
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- 如何用angularjs制作一个完整的表格之二__表格分页功能
接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- element UI实现表格中添加开关控制按钮
我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...
- vue中的swiper element ui
欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...
- element UI 调整表格行高
使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- vue中,使用element ui的弹窗与echarts之间的问题
今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就 ...
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
随机推荐
- docker 安装 redis
docker拉去镜像以及配置生成容器的步骤几乎和之前的nginx安装一样,直接写下面的命令了 1. docker pull redis 2. docker run -p 6379:6379 -v /U ...
- rabbitmq消息消费者
pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:// ...
- 分布式中为什么要加入redis缓存的理解
面我们介绍了mybatis自带的二级缓存,但是这个缓存是单服务器工作,无法实现分布式缓存.那么什么是分布式缓存呢?假设现在有两个服务器1和2,用户访问的时候访问了1服务器,查询后的缓存就会放在1服务器 ...
- spring中的idref标签详解
spring中的idref元素 idref元素是一个简单的对容器中存在的另外一个bean的检错途径(通过id); <idref bean="someBeanId"/> ...
- HDU 6351 (带技巧的暴力)
题意:给定一个数,和一个最多交换次数k,问在不超过k次操作的情况,问可以得到的最大值和最小值是多少? 个人解题的艰辛路程 , 开始是想到了暴力枚举的可能 , 打出来发现在判断枚举的数组与原来数组交换了 ...
- 1080 MOOC期终成绩 (25 分)
对于在中国大学MOOC(http://www.icourse163.org/ )学习“数据结构”课程的学生,想要获得一张合格证书,必须首先获得不少于200分的在线编程作业分,然后总评获得不少于60分( ...
- mongodb的初步使用
一.mongodb简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产 ...
- 【网络】访问控制列表(ACL)
目的:172.16.12.1可以telnet到172.16.12.254,但是无法ping通172.16.12.254 Router0配置: 配置enable密码(必须,否则无法进入特权模式): r1 ...
- ubuntu root用图形界面登录
http://blog.csdn.net/weimine/article/details/69055536 http://blog.csdn.net/gongxifacai_believe/artic ...
- Oracle 客户端、服务器、数据库、数据库对象(表、视图等)的关系
1.数据库服务器 所谓数据库服务器,只是在机器上安装了一个数据库管理软件,这个软件可以管理多个数据库.一般开发人员会针对每一个应用创建一个数据库 2.单实例数据库模式下的数据库服务器.数据库.数据库实 ...