分享一下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}})}()
转载于:https://www.cnblogs.com/zhujiasheng/p/6493004.html
分享一下vue ui的分页的用法相关推荐
- 详解Vue中watch的高级用法
转载自 详解Vue中watch的高级用法 我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
- 分享几个实用的国内可访问Vue ui库
前言: Vue的ui库众多,大多的UI库都由国外小组开发制作,故访问外国官网龟速,笔者介绍几个国内能正常访问的库. H5端: 1.Vant 轻量.可靠的移动端 Vue 组件库,色彩丰富,组件居多,更重 ...
- SAP UI 搜索分页技术
搜索分页技术往往和另一个术语Lazy Loading(懒加载)联系起来.今天由Jerry首先介绍S/4HANA,CRM Fiori和S4CRM应用里的UI搜索分页的实现原理.后半部分由SAP成都研究院 ...
- ElementUI+VUE 日期控件禁用用法
今天给大家整理一下ElementUI+VUE 日期控件禁用用法,希望对大家有所帮助! HTML文件 <el-date-pickerv-model="value"type=&q ...
- 推荐 21 个顶级的 Vue UI 库
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.Vuetify Star 数为 11K,提供了 80 多个 Vue.js 组件,这些组件是根据谷 ...
- vue ui报错 Couldn‘t parse bundle asset “C:\Users\cqq\Desktop\vuex\vuex_demo\dist\js\chunk-vendors.js“.
1. vue ui 运行编译项目时报错: Couldn't parse bundle asset 文件路径\\dist\js\chunk-vendors.js". Analyzer wil ...
- 输入vue ui没反应
在cmd中输入 vue ui没有反应 输入 vue -h查看,发现是版本太低,根本没有ui 这是因为vue的版本太低导致的, 输入cnpm i -g @vue/cli 升级脚手架即可 升级完成后,输入 ...
- UI培训分享:学UI设计需要知道哪些事情?
很多同学都想要学习UI设计技术,因为UI设计行业的发展前景非常不错,通过成为一名合格的UI设计师能够够更好的进入到互联网行业,那么学UI设计需要知道哪些事情呢?先来看看下面的详细介绍. UI培训分享: ...
- 使用amaze ui的分页样式封装一个通用的JS分页控件
作为一名码农,天天百度.偶尔谷歌,所有代码全靠copy,用第三方插件,偶尔也想着造造轮子,毕竟自己的骨肉总归比较亲. 今天有点空闲时间,想起我们公司之前套的页面的分页插件上还有bug,而写那个分页插件 ...
最新文章
- dst matlab,DSTcode DST跟踪算法MATLAB代码,复杂环境中仿多目标 实现的单 Other systems 其他 272万源代码下载- www.pudn.com...
- MySQL语法语句大全
- 牛客网 暑期ACM多校训练营(第一场)J.Different Integers-区间两侧不同数字的个数-离线树状数组 or 可持久化线段树(主席树)...
- Navicat怎样筛选数据
- mysql允许远程访问
- Python入门-day1变量和简单数据类型
- out参数不用赋值?这么神奇吗!
- linux 改变当前目录,Linux下使用Shell脚本改变当前工作路径
- Android App自动更新解决方案(DownloadManager)
- 《人件(原书第3版)》—— 01 此时此刻,一个项目正在走向失败
- 2021-10-08梦笔记
- pywifi 破解WiFi密码
- Ubuntu安装酷的桌面监控陈程序Conky
- 数学实验4:Matlab作图实验
- 使用wagtail搭建cms的安装流程
- AADL Inspector 故障树安全分析模块
- 迷惘_飘云羽逸_新浪博客
- 智能推荐系统开发中的十大要素
- U3D DotH教程3
- Java Stream map flatMap mapMulti的升维和降维
热门文章
- 【机器视觉】 dev_set_tool_geometry算子
- 【linux系统编程】进程间通信:信号中断处理
- java 洗牌_java数组之完美洗牌算法
- android+定时器+动画,Android 实现定时器的四种方式总结及实现实例_Android_脚本之家...
- 将vue部署在nginx上
- 关于eclipse中web项目tomcat报错Server Tomcat v9.0 Server at localhost failed to start问题解决
- matlab-Grefenstette的编码与解码
- 初学PX4之飞控算法
- HDU - Dogs' Candies
- c++动态内存的几个简单例子