vue与element表格数据转换（2）

vue与element表格数据转换（1）

在后台管理系统表格模块中，我们请求回来的时间数据，后台返给我们的不是有时间格式的时间(年-月-日 时:分:秒)，返给我们的是→(1573636558000)，但是怎么在表格中显示有时间格式的时间呢，还是需要数据转换

formatter属性

第一步给返回的数据添加数据转换方法:

:formatter="dateFormat"

<el-table  
     :data="tableData"  
     v-loading.body="loading"  
     border  
     @selection-change="selectionChange"  
     style="width: 100%">  
         <el-table-column  
                prop="createTime"  
                label="创建时间"  
                :formatter="dateFormat"     
                width="150">  
         </el-table-column>
         <el-table-column  
                prop="updateTime"  
                label="更新时间"  
                width="150">  
         </el-table-column>              
</el-table> 

第二步在methods中写数据转换方法:

dateFormat(row, column){
    let date = new Date(row[column.property]);
    let Y = date.getFullYear();
    let M = date.getMonth()+1;
    let D = date.getDate();
    let h = date.getHours();
    let m = date.getMinutes();
    let s = date.getSeconds();
    M = M < 10? '0' + M : M;
    D = D < 10? '0' + D : D;
    h = h < 10? '0' + h : h;
    m = m < 10? '0' + m : m;
    s = s < 10? '0' + s : s;
    return Y + "-" + M + "-" + D +" " + h + ":" + m +":" + s;
},  

看一下效果：

对比效果图

介绍使用的方法：

• getFullYear()：返回一个表示年份的 4 位数字
• getMonth()：返回表示月份的数字。返回值是 0（一月） 到 11（十二月） 之间的一个整数。
  注意： 一月为 0, 二月为 1, 以此类推。
• getDate()：返回月份的某一天
• getHours()：返回时间的小时字段
• getMinutes()：返回时间的分钟字段
• getSeconds()：返回时间的秒。返回值是 0 ~ 59 之间的一个整数

表格里的数据是从后端接口获取,
可以使用json-server的使用方法来模拟后端数据
也可以直接在data里模拟后台数据,可以去Element官网去查看