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()
        },

前端效果展示

总结

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

相关文章

  • Vant Weapp组件踩坑:picker的初始赋值解决

    Vant Weapp组件踩坑:picker的初始赋值解决

    这篇文章主要介绍了Vant Weapp组件踩坑:picker的初始赋值解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 17个vue常用的数组方法总结与实例演示

    17个vue常用的数组方法总结与实例演示

    这篇文章主要介绍了vue中常用的数组方法,包括:VUE数组转换字符串,VUE数组遍历,VUE数组过滤,VUE数组查询,VUE数组排序等功能,需要的朋友可以参考下
    2022-12-12
  • Vue3开发必备的六个VSCode插件推荐

    Vue3开发必备的六个VSCode插件推荐

    在VSCode中添加好用的插件可以提高我们的开发效率,这些可以帮助我们格式化,扩充性,执行最佳实践的代码方式,自动完成一些琐碎的事情,下面这篇文章主要给大家推荐介绍了关于Vue3开发必备的六个VSCode插件,需要的朋友可以参考下
    2022-12-12
  • vue中按钮操作完刷新页面的实现

    vue中按钮操作完刷新页面的实现

    这篇文章主要介绍了vue中按钮操作完刷新页面的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 深入理解Vue3响应式原理

    深入理解Vue3响应式原理

    响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue 使用iView组件中的Table实现定时自动滚动效果

    vue 使用iView组件中的Table实现定时自动滚动效果

    要在css中设置table的高度,使数据过多时出现滚动条,将纵向设置为overflow-y: auto;横向设置隐藏 overflow-x: hidden,接下来通过本文介绍vue使用iView组件中的Table实现定时自动滚动效果,需要的朋友可以参考下
    2024-05-05
  • vue中解决拖拽改变存在iframe的div大小时卡顿问题

    vue中解决拖拽改变存在iframe的div大小时卡顿问题

    这篇文章主要介绍了vue中解决拖拽改变存在iframe的div大小时卡顿问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue3项目中预览并打印PDF的两种方法

    Vue3项目中预览并打印PDF的两种方法

    最近在项目开发中碰到一个需求是在页面中展示pdf预览功能,下面这篇文章主要给大家介绍了关于Vue3项目中预览并打印PDF的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vscode中prettier和eslint换行缩进冲突的问题

    vscode中prettier和eslint换行缩进冲突的问题

    这篇文章主要介绍了vscode中prettier和eslint换行缩进冲突的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 浅谈VUE中演示v-for为什么要加key

    浅谈VUE中演示v-for为什么要加key

    这篇文章主要介绍了浅谈VUE中演示v-for为什么要加key,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论