实现页面
要求在点击新增时,获取到当天的日期以及时间,并且在用户填完信息后,提交时的时间是最新的时间,这就要求时间要实时更新,国庆七天假期一个代码都没写的我,瞬间感觉头疼。。。
表单提交
使用Element ui的form表单来实现提交功能
<el-form-item
label="时间:"
:label-width="formLabelWidth"
prop="time"
>
<el-date-picker
v-model="queryParamset.time"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</el-form-item>
添加表单验证功能
<el-form
:model="queryParamset"
:rules="rules"
ref="queryParamset"
label-width="100px"
>
//新增必填
rules: {
time: [
{
required: true,
message: "请选择日期",
trigger: "change",
},
],
在表单中定义字段(直接后端给的字段)
//新增参数
queryParamset: {
order: 1,
time: undefined,//日期以及时间
title: undefined,
content: undefined,
emotion: undefined,
emergency: undefined,
risk: undefined,
warning_value: undefined,
warning: undefined,
rs: undefined,
area: undefined,
field: undefined,
zdtfsj: false,
gfsj: false,
qtxsj: false,
warning_sync: false,
ds: undefined,
},
获取当前日期以及时间
//获取当前时间以及日期
getNowTime() {
var now = new Date();
var year = now.getFullYear(); //获取年
var month = now.getMonth();//获取月
var date = now.getDate();//获取日
var hours = now.getHours();//获取小时
var minutes = now.getMinutes();//获取分钟
var seconds = now.getSeconds();//获取秒
month = month + 1;
month = month.toString().padStart(2, "0");
date = date.toString().padStart(2, "0");
var defaultDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
this.$set(this.queryParamset, "time", defaultDate);//赋值给表单里面定义的时间
},
时间实时刷新
在created
中定义一个时间戳,然后调用获取时间的方法,实现时间实时刷新
created() {
setInterval(() => {
this.getNowTime();
}, 500);
},
OK,结束,最后在表单提交时,提交的时间就是用户填完表单,点击提交时的最新时间,最后感谢这位大佬给的文章