分享一下vue ui的分页的用法
var newToAddLeave = function(){ var goIndex = { template:` <i-table :columns="overTimeList.columns" :data="overTimeList.data" no-data-text="暂无数据"></i-table> <div class="vue-system-page"><Page :current="1" :show-total="true" :total="overTimeList.total" :page-size="5" :page-size-opts="[10, 20, 30, 40]" :show-elevator="true" @on-change="handlePage"></div></Page> `, data:function(){ return { overTimeList:{ columns:[], data:[], total:0, page:1, checkedNames: [] } } }, methods:{ textData:function(){ var list = []; var _this = this; _this.$Loading.start(); _this.$Message.loading(""); for(var i=0; i<18; i++){ list.push(Mock.mock({ "Serial":'@increment', "Applicant":"@cname", "ApplicantType": 'trms', "StartTime":'@date("yyyy-MM-dd")', "endTime|":'@date("yyyy-MM-dd")', "days|1-10":10, "processName|1": ['tmrs','新闻','员工有话说','portal'], "action": '001', "Manage": '@clast', "processTime|1": ['2017-1-30'], "sydays|1": [2,3], "beizhu": '@ctitle(3, 5)', })); } _this.overTimeList.data = list; _this.overTimeList.total = list.length; setTimeout(function(){ _this.$Loading.finish(); _this.$Message.destroy(); },2000) }, handlePage:function(val){ this.page = val; this.textData(); }, getOverTimeList:function(){ var self = this; self.overTimeList.columns = [ { title: '序号', key: 'Serial', align:'center' }, { title: '申请人', key: 'Applicant', align:'center' }, { title: '申请类型', key: 'ApplicantType', align:'center' }, { title: '开始日期', key: 'StartTime', align:'center' }, { title: '结束日期', key: 'endTime', align:'center' }, { title: '天数', key: 'days', align:'center' }, { title: '项目名称', key: 'processName', align:'center' }, { title: '操作', key: 'action', align:'center' }, { title: '经办人', key: 'Manage', align:'center' }, { title: '处理时间', key: 'processTime', align:'center' }, { title: '剩余天数', key: 'sydays', align:'center' }, { title: '备注', key: 'beizhu', width:200, } ]; } }, ready:function(){ this.getOverTimeList(); this.textData(); } } return new Vue({ el:'#app2', components:{ goIndex:goIndex } }) }()
分享一下vue ui的分页的用法的更多相关文章
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- SAP UI 搜索分页技术
搜索分页技术往往和另一个术语Lazy Loading(懒加载)联系起来.今天由Jerry首先介绍S/4HANA,CRM Fiori和S4CRM应用里的UI搜索分页的实现原理.后半部分由SAP成都研究院 ...
- 公司内部技术分享之Vue.js和前端工程化
今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...
- 为公司架构一套高质量的 Vue UI 组件库
有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...
- Vue UI:Vue开发者必不可少的工具
译者按: Vue开发工具越来越好用了! 原文: Vue UI: A First Look 译者: Fundebug 本文采用意译,版权归原作者所有 随着最新的稳定版本Vue CLI 3即将发布,是时候 ...
- vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验
1. 全局安装vue-cli yarn global add @vue/cli // 检查安装是否成功 vue -V // 3.2.2 2. 初始化 vue ui 执行命令 vue ui 2.1 该命 ...
- vue利用vue ui命令创建项目
上次用git bash,用create 命令创建vue项目,这是玩个炫酷的------vue ui (前提是有安装node.js). 在目标文件 vue ui 可以看到他在8000端口出现了一个gu ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
随机推荐
- Adobe Flex迷你教程 —Flex4全屏显示
应用场景 1.播放器 我们经常看视频的时候,需要全屏显示,(在flex中这个视频初始化的时候是嵌入到html的iframe中). 2.监控 如下图所示,大多时候我们的监控用的是flex,而树形菜单和标 ...
- 【Henu ACM Round#24 B】Gargari and Bishops
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果写过n皇后问题. 肯定都知道 某个点(i,j)和它在同一条对角线上的点分别是i+j的值和i-j的值相同的点. 然后会发现选择的两 ...
- bzoj1050【HAOI2006】旅行comf
1050: [HAOI2006]旅行comf Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2205 Solved: 1174 [Submit][ ...
- Tomcat的安装跟配置
安装Tomcat的步骤:1)安装好JDK2)把tomcat-7.0.30软件解压到本地硬盘3)设置环境变量:JAVA_HOME: C:\Program Files\Java\jdk1.7.0_04To ...
- 1.MySQL与MongoDB的操作对比,以及区别
转自:https://www.cnblogs.com/chris-oil/p/4982490.html MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoD ...
- django 笔记12 session
第一步写好函数,然后生成数据库session表 python manage.py makemigrations python manage.py migrate session原理: .Session ...
- POJ 3661 DP
题意: 思路: i表示到了i,j表示疲劳度为j f[i][j]表示能跑的最大距离 f[i][j]=f[i-1][j-1]+a[i] if(i-j>=0)f[i][0]=max(f[i][0],f ...
- HD-ACM算法专攻系列(3)——Least Common Multiple
题目描述: 源码: /**/ #include"iostream" using namespace std; int MinComMultiple(int n, int m) { ...
- Asp.Net 中使用 水晶报表(上)
Asp.Net中使用水晶报表(上) 在我们对VS.Net中的水晶报表(Crystal Reports)进行研究之前,我和我朋友对如何将这个复杂的东东加入我们的Web应用有着非常的好奇心.一周以后,在阅 ...
- 数据库Tsql语句创建--约束--插入数据
1.创建数据库 use master go if exists(select * from sysdatabases where name='数据库名字') drop database 数据库名字 g ...