Vue中render如何实现渲染时间戳转时间以及渲染进度条效果
这篇文章给大家分享的是有关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) } } }, '修改') ]); } } ] } },
数据表:
显示时间具体代码:
{ 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如何实现渲染时间戳转时间以及渲染进度条效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网站标题:Vue中render如何实现渲染时间戳转时间以及渲染进度条效果
文章路径:http://scyanting.com/article/jehcsg.html