一.格式化時間
效果圖：
實現上述界面代碼如下：
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+'%'),]) } }其他具體界面實現請查看：https://www.iviewui.com/components/table
總結
以上所述是小編給大家介紹的Vue render渲染時間戳轉時間,時間轉時間戳及渲染進度條效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
