当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果

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

2019年06月03日  | 移动技术网IT编程  | 我要评论

南京新百网上商城,宋宝儿,许我向你看结局

一.格式化时间

效果图：

time

实现上述界面代码如下：

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)
          }
         }
        }, '修改')
       ]);
      }
     }
    ]
   }
  },

数据表：

data

显示时间具体代码：

 {
      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+'%'),])
      }
     }

其他具体界面实现请查看：

总结

以上所述是小编给大家介绍的vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网