一. 时间处理主要包含三个方面

1. 表单上时间的展现形式

1）主要通过el-date-picker时间组件控制

<el-row><el-col :span="12"><el-form-item label="入党时间" prop="partyJoinTime"><el-date-picker v-model="form.partyJoinTime" placeholder="选择入党时间"format="yyyy-MM-dd" value-format="timestamp"></el-date-picker></el-form-item></el-col><el-col :span="12"><el-form-item label="转正时间" prop="regularTime"><el-date-picker v-model="form.regularTime" placeholder="选择转正时间"format="yyyy-MM-dd" value-format="timestamp"></el-date-picker></el-form-item></el-col>
</el-row>

其中format参数主要控制选中时间之后的展现格式：yyyy-MM-dd

2. form表单时间格式数据的提交

<el-row><el-col :span="12"><el-form-item label="入党时间" prop="partyJoinTime"><el-date-picker v-model="form.partyJoinTime" placeholder="选择入党时间"format="yyyy-MM-dd" value-format="timestamp"></el-date-picker></el-form-item></el-col><el-col :span="12"><el-form-item label="转正时间" prop="regularTime"><el-date-picker v-model="form.regularTime" placeholder="选择转正时间"format="yyyy-MM-dd" value-format="timestamp"></el-date-picker></el-form-item></el-col>
</el-row>

其中value-format参数主要控制form表单提交时间参数到后端的类型：timestamp（long型）

3. 列表上展示后台获取的时间

1）安装moment插件

npm install moment --save

2）在main.js中引入moment组件

import moment from "moment";
Vue.prototype.$moment = moment
moment.locale('zh-cn')

3）Vue中的使用

import moment from "moment";partyJoinTimeFormat(row, column){return moment(row.partyJoinTime).format("yyyy-MM-DD hh:mm:ss")
}<el-table><el-table-column label="入党时间" align="center" key="partyJoinTime" prop="partyJoinTime"  :show-overflow-tooltip="true" :formatter="partyJoinTimeFormat"/>
<el-table/>

注意：通过formatter调用对应的方法，在方法中对时间格式进行转换并返回（目前主要是基于long行时间转成字符串时间）

Vue+ElementUi中时间处理相关推荐

vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
vue+elementUI中使用Echarts （懒人无脑版）
vue+elementUI中使用Echarts (懒人无脑版)+(史上最强版) 前言一.Echarts 1.提供一个Echarts 网站随去随用 http://img.9cfcf.com/#tp- ...
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象自我记录. Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做除了使 Vue 变 ...
vue+elementui中使用echarts给柱形图添加背景色
vue+elementui中使用echarts给柱形图添加背景色首先使用npm安装echarts npm install echarts --save //or(或者使用) cnpm install ...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
表头主要复杂在: 1,有三层,一层是大类,第二层是具体项,第三层是标准值/对比值 2,首列和末尾列是一层 3,整个表格的维度是根据数据的输入自己生成,也就是动态的下面是在 vue + eleUI 中 ...
修改element-ui中时间选择器的样式
一般项目中如果设置了scoped属性,可以通过>>>或者/deep/来修改其他第三方组件的样式. 但是elementUI的时间选择器el-date-picker是将元素直接挂载到页面 ...
vue element-ui 中走马灯自适应图片高度
图片自适应废话不多说先上完整的代码 <template><div>{{img_height | add_px}}<el-carousel indicator-posit ...
VUE ElementUI中table框设置文字超出隐藏及设置提示框样式
当表格中某单元格的文字内容过多时,table中的每行的行高不一致导致风格不统一,这时需要用到ElementUI中table自带的属性show-overflow-tooltip使其内容均在一行显示,超出 ...

Vue+ElementUi中时间处理

一. 时间处理主要包含三个方面

1. 表单上时间的展现形式

1）主要通过el-date-picker时间组件控制

2. form表单时间格式数据的提交

3. 列表上展示后台获取的时间

1）安装moment插件

2）在main.js中引入moment组件

3）Vue中的使用

Vue+ElementUi中时间处理相关推荐

最新文章

热门文章