elementUI中使用formatter对table中时间格式化

最新推荐文章于 2024-10-22 23:52:01 发布

原创最新推荐文章于 2024-10-22 23:52:01 发布 · 1.7w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#elementUI #vuejs

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

elementUI

5 篇文章

订阅专栏

本文介绍如何在ElementUI的table组件中使用formatter属性自定义日期格式。通过绑定外部工具js中的formatDate方法，实现对表格中date属性值的格式化显示。

elementUI中的table提供了formatter这个属性来对传入的数据进行用户自定义的格式化

table的写法如下:

 <el-table
	:data="list"
	border
	style="width: 100%"
	:header-cell-style="{color:'black',textAlign:'center'}">
	<el-table-column
		prop="date"
		:formatter="common.formatDate"
		label="时间"
		width="100">
    </el-table-column>
</el-table>

该table只有一列数据, table数据来自el-table中:data绑定的data中的list变量的值, 该列内容是list中每项的date属性的值

使用formatter绑定了外部工具js中的formatDate方法,

这里我只使用了formatter方法的cellValue值, 该值表示当前单元格的值, 也就是el-table-column的prop的值

var common = {

  formatDate:function(row, column, cellValue, index) {
    if(cellValue==null || cellValue=="") return "";
    let date = new Date(parseInt(cellValue) * 1000);
    let Y = date.getFullYear() + '-';
    let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
    let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
    let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
    let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return Y + M + D ;
  },
}
export default common;

在main.js中全局定义了Vue.prototype.common = common; 固在需要的vue中只要使用common.formatDate即可, 如果在methods中使用this.common.formateDate

formatter有四个参数: Function(row, column, cellValue, index), 使用row可以把table改行的内容传回去, 比如list如下:

[{

date:1535472000

name:'xxxx'

},{

date:1535471000

name:'xxxx1'

}],

,在formatDate:function(row, column, cellValue, index) {}中使用row.date则可以获取当前行的date属性的值, row.name可以获取当前行的name属性