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

2023-11-13

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

前端效果展示:

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

elementui 之el-table-column 日期格式显示 的相关文章

  • vue3 vue-router 钩子函数

    全局路由守卫 vue router4 0中将next取消了 可写可不写 return false取消导航 undefined或者是return true验证导航通过 router beforeEach to from gt next是可选参
  • vue3使用import.meta.env在vite.config.ts下使用env环境变量的方法

    vue3使用import meta env在vite config ts下使用env环境变量的方法 编程一枚的博客 CSDN博客
  • element-plus中 el-image :src属性发送get请求

    项目场景 Element plus 中
  • Vue + Element UI 前端篇(十一):第三方图标库

    Vue Element UI 实现权限管理系统 前端篇 十一 第三方图标库 使用第三方图标库 用过Elment的同鞋都知道 Element UI提供的字体图符少之又少 实在是不够用啊 幸好现在有不少丰富的第三方图标库可用 引入也不会很麻烦
  • Vue js引用警告 “export ‘default‘ (imported as ‘xxx‘) was not found

    问题原因 ES6 编译器识别问题 如果在public js这样写会有警告export default imported as xxx was not found export const myMixin 解决办法 修改组件中引用js的地方
  • 包管理工具那么多,怎么选?npm、yarn 和 pnpm 三者比较及使用详解!

    1 简介 在 Vue 项目中 我们需要使用许多第三方依赖库 如 Vue Router Vuex Axios Element UI 等等 这些依赖库通常以 NPM 包的形式提供 而且在使用时需要进行版本管理 因此 我们需要使用一个包管理工具来
  • 微信pc端浏览器打开页面空白的问题

    今天写了一个web项目 用chrome浏览器 手机端微信你打开都没问题 但是在pc端微信打开后是空白的 于是我重新做了一个空白的vue项目 用pc端微信浏览器是可以打开的 慢慢调试发现是语法的问题 一步一步减去组件 再一步一步加上组件 最终
  • 上拉加载原理

    实现思路 之前写过一篇触底加载 经过一番苦学钻研 优化一下 样式方面 滚动区域是给固定高度 设置 overflow y auto 来实现 接下来看看js方面的实现 其实也很简单 触发的条件是 可视高度 滚动距离 gt 实际高度 例子我会使用
  • 前端大屏常用的适配方案

    假设我们正在开发一个可视化拖拽的搭建平台 可以拖拽生成工作台或可视化大屏 或者直接就是开发一个大屏 首先必须要考虑的一个问题就是页面如何适应屏幕 因为我们在搭建或开发时一般都会基于一个固定的宽高 但是实际的屏幕可能大小不一 接下来我们就尝试
  • mapState的使用(常用)

    mapState作用 可以辅助获取到多个state的值 怎么使用 1 在 vue组件中引入 在js块中引入 import mapState from vuex 2 在 vue组件中computed下定义一个对象 computed mapSt
  • 8.全配置自动生成模块前后端

    文章目录 学习资料 配置式开发全新的模块 快速实现 字典管理 代码生成器详细属性设置 全智能模块开发 查询调整 多表连接 药品模块 生产厂家下拉框 学习资料 https www bilibili com video BV13g411Y7GS
  • uni-app项目中使用scss语法

    最近正在学习uni app开发 我先把文档浅略翻了遍 发现组件和接口几乎都是按照微信小程序走 但是视图层上的语法又是按照vue的语法走的 所以开发过程一定要注意这点 然后我想在uni app项目中使用scss语法 但是具体怎么安装呢 历经曲
  • vue项目使用视频播放器vue-video-player

    安装使用 插件有版本限制 如果项目使用的是vue2 0版本 请选择安装 4 x版本 否则会安装不成功 yarn add vue video palyer save 或者 npm install vue video palyer save 组
  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开
  • vue_table导出excel

    vue直接导出对应table const exportClick gt const wb XLSX utils table to book document querySelector newTables 关联dom节点 get binar
  • Vue学习之watch侦听器:案例实现翻译功能

    watch侦听器 作用 监视数据的变化 当数据发生变化时 执行一些业务逻辑或者是异步操作 执行的场景例如在线翻译 当文本区域的内容发生变化时 会发生翻译内容的同时更新 语法 简单的写法 简单数据类型 可以直接的进行监听 完整的写法 添加额外
  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解
  • Vue3+Echarts:堆积柱状图的绘制

    一 需求 在Vue3项目中 想用Echarts来绘制堆积柱状图 去展示最近一周APP在不同渠道的登录人数 效果如下 二 实现 关于Echarts的下载安装以及图表的样式设计 此处不展开 1 Templates部分
  • 黑豹程序员-字符串中查找出重复的字符串

    Collections frequency codeList element 字符串element 在codeList集合中重复的次数 List
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码

随机推荐