天天看点

ElementUI 之el-table-column 格式化属性(日期格式化)

如果想对表格某一列的内容格式化(性别\日期显示),可用 formatter 属性。

实战:日期显示

ElementUI 之el-table-column 格式化属性(日期格式化)

在method 定义formatDate 方法

formatDate(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if(data == null) {
                    return null
                }
                let dt = new Date(data)
                 return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
           

 Vue项目效果:

ElementUI 之el-table-column 格式化属性(日期格式化)

 实战:性别显示

ElementUI 之el-table-column 格式化属性(日期格式化)

在method 定义formatGenderType方法

formatGenderType(row, column){
             if(row.gender === 1){
                     return '男'
                 } else if(row.gender === 2) {
                     return '女'
                 } else {
                     return ''
                 }
        },
           

 效果展示:

ElementUI 之el-table-column 格式化属性(日期格式化)