使用iView中的render函数,格式化日期数据

逃离我推掉我的手 2022-10-01 12:50 422阅读 0赞

iview和element大部分功能相同,但是发现它并没有formatter,在使用它的table组件的时候,有一行需要时间戳要转换成指定的日期格式,感觉以后还会用到,特此记录一下

### iview 代码: ###

#### template: ####

<Table stripe size="small" border :columns="columns1" :data="data1"></Table>

#### script: ####

<script>
    export default { 
      data() { 
       return { 
         columns1: [
          { 
              title: '序号',      
              type: 'index',      /* type=index,iview将自动为表格添加序号 */
              align: 'center'
          },
          { 
              title: '维保时间',
              key: 'lastUpdate',
              render: function (h, params) { 
                return h('div', 
                  new Date(this.row.lastUpdate).Format('yyyy-MM-dd'));/*这里的this.row能够获取当前行的数据*/
              }
          },
          { 
              title: '维保部件',
              key: 'maintainItem'
          },
          { 
              title: '更换配件',
              key: 'parts'
          },
          { 
              title: '备注',
              key: 'comments'
          }
        ],
        data1: [],            /* 未来数据的存放区 */
        maintainMsgs:{         /* 这里直接贴出axios请求服务器相应回来的数据 */
          "success": true,
          "msg": "查询成功",
          "object": [
            { 
              "statusCode": 0,
              "maintainItem": "环境",
              "planTagId": 319784,
              "lastUpdate": 1510825560000,
              "parts": "",
              "comments": "-"
            },
            { 
              "statusCode": 0,
              "maintainItem": "装置",
              "planTagId": 3,
              "lastUpdate": 1510825560000,
              "parts": "",
              "comments": "-"
            }
          ],
          "result": null
        }
       },
       methods :{ 
        formatDate(timestramp){ 
          return new Date(timestramp).Format('yyyy-MM-dd');
        },
        initFormatter(){ 
          Date.prototype.Format = function(fmt) {  //
            let o = {   
                "M+" : this.getMonth()+1,                 //月份 
                "d+" : this.getDate(),                    //日 
                "h+" : this.getHours(),                   //小时 
                "m+" : this.getMinutes(),                 //分 
                "s+" : this.getSeconds(),                 //秒 
                "q+" : Math.floor((this.getMonth()+3)/3), //季度 
                "S"  : this.getMilliseconds()             //毫秒 
            };  
            if(/(y+)/.test(fmt))  
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
            for(var k in o)  
                if(new RegExp("("+ k +")").test(fmt))  
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
            return fmt;  
          }
        }
       }
       created(){ 
         this.data1 = this.maintainMsgs.object; // 数据初始化
         this.initFormatter();                  // 为Date 对象添加Format方法
       }
      }
    }
    </script>

注意:render方法里面能编写JavaScript代码,但不能调用methods中定义好的方法

发表评论取消回复

表情：

评论列表（有 0 条评论，422人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue render 函数中使用this

1.在render中直接使用this,on里面click函数不是箭头函数使用this需要在父级将this保存起来才能使用 render: (h, params)

亦凉/ 2023年06月08日 04:58/ 0 赞/ 7 阅读

相关 iview—Table表格render 渲染

1.序号 2.if判断、a标签 3.if判断、Input输入 4.renderHeader自定义列头的点击事件、render的Input点击事件

Dear 丶/ 2023年06月04日 02:53/ 0 赞/ 30 阅读

相关 js格式化日期函数

js格式化日期函数 function formatDate(time,str)\{ var obj = \{ yyyy : time.getFullYear(),

港控/mmm°/ 2022年12月28日 12:38/ 0 赞/ 235 阅读

相关使用iView中的render函数,格式化日期数据

iview和element大部分功能相同,但是发现它并没有formatter,在使用它的table组件的时候,有一行需要时间戳要转换成指定的日期格式,感觉以后还会用到,特此记录

逃离我推掉我的手/ 2022年10月01日 12:50/ 0 赞/ 423 阅读

相关 iview中使用render属性生成自定义的标签

Table表格关于生成自定义列的表格，效果如下： ![70][] 代码如下： <template> <Table border :columns="colum

末蓝、/ 2022年05月12日 11:26/ 0 赞/ 530 阅读

相关 iview的table表格中使用render函数进行单元格格式化

一、统一样式 <i-table size="large" :columns="columns1" :data="data1"></i-table> colu

骑猪看日落/ 2022年02月19日 02:34/ 0 赞/ 626 阅读

相关 ASP中常用的日期格式化函数 FormatDate()

核心代码： <% '功能:多功能日期格式化函数 '来源:http://jorkin.reallydo.com/article.asp?id=477

电玩女神/ 2021年11月05日 15:46/ 0 赞/ 375 阅读

相关 iview render函数常用总结（vue render函数）

iview 的render函数就是vue的render函数 iview常用在表格里面自定义内容 render函数常用的配置 h就是createdElement的简写

今天药忘吃喽~/ 2021年09月19日 00:30/ 0 赞/ 537 阅读

相关 iview,用render函数渲染

<Table border :columns="discountColumns" :data="discountData.rows"></Table> disc...

红太狼/ 2021年05月02日 14:47/ 0 赞/ 547 阅读

相关使用IView中的render函数,格式化日期数据

iview和element大部分功能相同,但是发现它并没有formatter,在使用它的table组件的时候,有一行需要时间戳要转换成指定的日期格式,感觉以后还会用到,特...

朱雀/ 2020年11月07日 04:11/ 0 赞/ 931 阅读