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

最新推荐文章于 2024-09-13 20:58:11 发布

yytoo2

最新推荐文章于 2024-09-13 20:58:11 发布

阅读量1.7w

点赞数 4

分类专栏：前端 elementUI 文章标签： elementUI vuejs

本文链接：https://blog.csdn.net/yytoo2/article/details/83992175

版权

前端同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

elementUI

5 篇文章 0 订阅

订阅专栏

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属性