Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果


Posted in Javascript onJuly 27, 2018

一.格式化时间

效果图:

Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

实现上述界面代码如下:

data() {
   return {
    loading: false,
    demandData: [],
    demandcount: 0,//总条数
    skip: 0, //分页
    pageSize: this.LIMIT,
    columns: [
     {
      title: '编号',
      width: 60,
      align: 'center',
      type: 'index'
     },
     {
      title: '标签名称',
      key: 'd_title'
     },
     {
      title: '创建者',
      key: 'd_create_user'
     },
     {
      title: '内容描述',
      key: 'd_content',
      width: "20%"
     },
     {
      title: '创建时间',
      key: 'd_create_time',
      render: (h, params) => {
       const row = params.row;
       return h('div', [
        h('span', {}, this.timeStamp(row.d_create_time)),
       ]);
      }
     },
     {
      title: '修改时间',
      key: 'd_change_times'
     },
     {
      title: '完成进度',
      key: 'd_progress',
      render: (h, params) => {
       return h('div',[
        h('Progress', {
         props: {
          type: 'Progress',
          size: 'small',
          percent:parseInt(params.row.d_progress)
         }
        }, params.row.d_progress+'%'),])
      }
     },
     {
      title: '操作',
      key: 'operation',
      align: 'center',
      render: (h, params) => {
       return h('div', [
        h('Button', {
         props: {
          type: 'primary',
          size: 'small'
         },
         style: {
          marginRight: '5px'
         },
         on: {
          click: () => {
           console.log(params);
           // this.$router.push({path: '/xxxx', query: {fc_id: params.row.fc_id}});
           alert(1)
          }
         }
        }, '分配'),
        h('Button', {
         props: {
          type: 'primary',
          size: 'small'
         },
         style: {
          marginRight: '5px'
         },
         on: {
          click: () => {
           console.log(params);
           alert(2)
          }
         }
        }, '编辑'),
        h('Button', {
         props: {
          type: 'primary',
          size: 'small'
         },
         style: {
          marginRight: '5px'
         },
         on: {
          click: () => {
           console.log(params);
           // this.$router.push({path: '/xxxx', query: {fc_id: params.row.fc_id}});
           alert(3)
          }
         }
        }, '备注'),
        h('Button', {
         props: {
          type: 'primary',
          size: 'small'
         },
         style: {
          marginRight: '0px'
         },
         on: {
          click: () => {
           console.log(params);
           // this.$router.push({path: '/xxxx', query: {fc_id: params.row.fc_id}});
           alert(4)
          }
         }
        }, '修改')
       ]);
      }
     }
    ]
   }
  },

数据表:

Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

显示时间具体代码:

{
      title: '创建时间',
      key: 'd_create_time',
      render: (h, params) => {
       const row = params.row;
       return h('div', [
        h('span', {}, this.timeStamp(row.d_create_time)),
       ]);
      }
     }

时间转化工具类:

//时间戳转时间
  Vue.prototype.timeStamp = function (time) {
   var date = new Date(time * 1000);
   var Y = date.getFullYear() + '-';
   var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
   var D = date.getDate() + ' ';
   var h = date.getHours() + ':';
   var m = date.getMinutes() + ':';
   var s = date.getSeconds();
   if(D < 10){
    D = "0" + D;
   }
   return Y + M + D
  }
  //时间转时间戳
  Vue.prototype.time = function (index) {
   var strtime = index;
   var date = new Date(strtime);
   var time = Date.parse(date) / 1000;
   return time
  }

二.进度条:

{
      title: '完成进度',
      key: 'd_progress',
      render: (h, params) => {
       return h('div',[
        h('Progress', {
         props: {
          type: 'Progress',
          size: 'small',
          percent:parseInt(params.row.d_progress)
         }
        }, params.row.d_progress+'%'),])
      }
     }

其他具体界面实现请查看:https://www.iviewui.com/components/table

总结

以上所述是小编给大家介绍的Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
jquery处理json对象
Nov 03 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 #Javascript
在vue中使用Autoprefixed的方法
Jul 27 #Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 #Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 #Javascript
Vue头像处理方案小结
Jul 26 #Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 #Javascript
vue router 配置路由的方法
Jul 26 #Javascript
You might like
简化php模板页面中分页代码的解析
2009/02/06 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
vue组件与复用详解
2018/04/08 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
Python输出各行命令详解
2018/02/01 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
护士求职信
2014/07/05 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
民事起诉状范文
2015/05/19 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
2019财务转正述职报告
2019/06/27 职场文书
在Python中如何使用yield
2021/06/07 Python