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

朱雀 2020-11-07 04:11 940阅读 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 条评论，940人围观）

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

相关阅读

相关 iview—Table表格render 渲染

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

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

相关 js格式化日期函数

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

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

相关 iview使用render函数在列表页生成状态列表并修改

只贴出核心代码截图如下，点击下拉菜单即可修改项目发布状态，显示的内容根据字段status来判断，status为0时未发布，为1时已发布 ![watermark_type_

ゝ一世哀愁。/ 2022年10月01日 12:57/ 0 赞/ 151 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 iview,用render函数渲染

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

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

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

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

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