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 操作Word和Excel的实现代码
Oct 26 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
JS中数据结构之栈
Jan 01 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
JavaScript中的 new 命令
May 22 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
AngularJS实现多级下拉框
Mar 25 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实现检查文章是否被百度收录
2015/01/27 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jquery实现保存已选用户
2014/07/21 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
Python 实现微信防撤回功能
2019/04/29 Python
python绘制地震散点图
2019/06/18 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python集合常见运算案例解析
2019/10/17 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
python小白切忌乱用表达式
2020/05/29 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
2015关爱留守儿童工作总结
2014/12/12 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript