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数组的扩展实现代码集合
Jun 01 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
BootStrap 导航条实例代码
May 18 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+Html+缓存
2006/12/20 PHP
php抓取https的内容的代码
2010/04/06 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
美国网上书店:Barnes & Noble
2018/08/15 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
商务英语专业求职信范文
2014/01/28 职场文书
教师学期个人总结
2015/02/11 职场文书
2015国庆节宣传语
2015/07/14 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
golang正则之命名分组方式
2021/04/25 Golang