elementui 之el-table-column 日期格式显示

熊孩纸 阅读:1267 2021-03-31 12:25:49 评论:0

如果想对表格某一列的内容进行日期格式化,可用 formatter 属性。属性绑定日期格式化的方法即可。

前端代码之模板

 <el-row> 
            <el-table :data="tableData" style="width: 100%;"> 
                        <el-table-column prop="title" label="通知标题" > 
                        </el-table-column> 
                        <el-table-column prop="content" label="通知详情" > 
                        </el-table-column> 
                        <el-table-column prop="addTime" label="添加时间" :formatter="formatDate" > 
                        </el-table-column> 
                         <el-table-column prop="adminId" label="管理员ID" > 
                        </el-table-column> 
                         
                        <el-table-column label="操作"> 
                            <template slot-scope="scope"> 
                                <el-button type="primary" size="mini" @click="toEdit(scope)">编辑</el-button> 
                                <el-button type="danger" size="mini" @click="deleteRole(scope)">删除</el-button> 
                            </template> 
                        </el-table-column> 
                    </el-table> 
                    <br> 
                    <el-pagination 
                        @size-change="handleSizeChange" 
                        @current-change="handleCurrentChange" 
                        :current-page="pagination.pageIndex" 
                        :page-sizes="[5, 10, 20, 30, 40]" 
                        :page-size=pagination.pageSize 
                        layout="total, prev, pager, next" 
                        :total=pagination.total> 
                    </el-pagination> 
        </el-row>

前端代码之方法

 //方法区 
        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() 
        },

前端效果展示:

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号