Vue+ElementUi中时间处理

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

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行时间转成字符串时间）