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 相关文章推荐
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
Javascript调用C#代码
Jan 17 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
详解如何较好的使用js
2016/12/16 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
JS实现div模块的截图并下载功能
2017/10/17 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python中操作MySQL入门实例
2015/02/08 Python
python中assert用法实例分析
2015/04/30 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python斐波那契数列的计算方法
2018/09/27 Python
Django如何将URL映射到视图
2019/07/29 Python
python编写简单端口扫描器
2019/09/04 Python
python区分不同数据类型的方法
2019/10/14 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
综合实践活动总结
2014/05/05 职场文书
会员卡清退活动总结
2014/08/27 职场文书
政府个人对照检查材料
2014/08/28 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
MySQL数据库事务的四大特性
2022/04/20 MySQL