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

 更新时间:2024年12月24日 16:59:40   作者:在奋斗的大道  
文章介绍了如何使用formatter属性对表格某一列的内容进行日期格式化,通过绑定日期格式化的方法实现,展示了前端代码的模板和方法,并给出了前端效果的展示

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

如果想对表格某一列的内容进行日期格式化,可用 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()
        },

前端效果展示

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.js 实现微信公众号菜单编辑器功能(一)

    Vue.js 实现微信公众号菜单编辑器功能(一)

    最近vue.js 非常火热,小编也趁机学习了下vuejs的一些基础知识,于是尝试做一个像微信平台里的菜单编辑器功能,下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家,需要的朋友参考下
    2018-05-05
  • 基于vue实现圆形菜单栏组件

    基于vue实现圆形菜单栏组件

    这篇文章主要介绍了基于vue实现的圆形菜单栏组件,本文通过实例代码,图文详解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 使用D3.js+Vue实现一个简单的柱形图

    使用D3.js+Vue实现一个简单的柱形图

    这篇文章主要介绍了使用D3.js+Vue实现一个简单的柱形图,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • 解决vuex刷新状态初始化的方法实现

    解决vuex刷新状态初始化的方法实现

    这篇文章主要介绍了解决vuex刷新状态初始化的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue 详解mixins混入用法大全

    Vue 详解mixins混入用法大全

    如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性,这时使用Vue mixins混入有很大好处,下面就介绍下Vue mixins混入使用方法,需要的朋友参考下吧
    2021-08-08
  • 详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-06
  • Vue2.x 的双向绑定原理及实现

    Vue2.x 的双向绑定原理及实现

    这篇文章主要介绍了Vue2.x 的双向绑定原理,Vue 是利用的 Object.defineProperty() 方法进行的数据劫持,利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • Vue在页面右上角实现可悬浮/隐藏的系统菜单

    Vue在页面右上角实现可悬浮/隐藏的系统菜单

    这篇文章主要介绍了Vue在页面右上角实现可悬浮/隐藏的系统菜单,实现思路大概是通过props将showCancel这个Boolean值传递到子组件,对父子组件分别绑定事件,来控制这个系统菜单的显示状态。需要的朋友可以参考下
    2018-05-05
  • 详解vue 中使用 AJAX获取数据的方法

    详解vue 中使用 AJAX获取数据的方法

    本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法,在VUE开发时,数据可以使用jquery和vue-resource来获取数据,有兴趣的可以了解一下。
    2017-01-01
  • Vue中动态绑定Ref的两种方式总结

    Vue中动态绑定Ref的两种方式总结

    Vue3中的ref是一种创建响应式引用的方式,它在Vue生态系统中扮演着重要角色,下面这篇文章主要给大家介绍了关于Vue中动态绑定Ref的两种方式,需要的朋友可以参考下
    2024-09-09

最新评论