Vue中render如何實現(xiàn)渲染時間戳轉(zhuǎn)時間以及渲染進度條效果

這篇文章給大家分享的是有關(guān)Vue中render如何實現(xiàn)渲染時間戳轉(zhuǎn)時間以及渲染進度條效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

為未央等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及未央網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、未央網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

一.格式化時間

效果圖：

Vue中render如何實現(xiàn)渲染時間戳轉(zhuǎn)時間以及渲染進度條效果

實現(xiàn)上述界面代碼如下：

data() {
   return {
    loading: false,
    demandData: [],
    demandcount: 0,//總條數(shù)
    skip: 0, //分頁
    pageSize: this.LIMIT,
    columns: [
     {
      title: '編號',
      width: 60,
      align: 'center',
      type: 'index'
     },
     {
      title: '標(biāo)簽名稱',
      key: 'd_title'
     },
     {
      title: '創(chuàng)建者',
      key: 'd_create_user'
     },
     {
      title: '內(nèi)容描述',
      key: 'd_content',
      width: "20%"
     },
     {
      title: '創(chuàng)建時間',
      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)
          }
         }
        }, '修改')
       ]);
      }
     }
    ]
   }
  },

數(shù)據(jù)表：

Vue中render如何實現(xiàn)渲染時間戳轉(zhuǎn)時間以及渲染進度條效果

顯示時間具體代碼：

 {
      title: '創(chuàng)建時間',
      key: 'd_create_time',
      render: (h, params) => {
       const row = params.row;
       return h('div', [
        h('span', {}, this.timeStamp(row.d_create_time)),
       ]);
      }
     }

時間轉(zhuǎn)化工具類：

//時間戳轉(zhuǎn)時間
  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
  }
  //時間轉(zhuǎn)時間戳
  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+'%'),])
      }
     }

感謝各位的閱讀！關(guān)于“Vue中render如何實現(xiàn)渲染時間戳轉(zhuǎn)時間以及渲染進度條效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文名稱：Vue中render如何實現(xiàn)渲染時間戳轉(zhuǎn)時間以及渲染進度條效果
當(dāng)前路徑：http://muchs.cn/article36/jehcsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、建站公司、網(wǎng)站制作、移動網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)