问题描述
- 使用<el-date-picker>标签时,有时间校验规则,如果添加时间,没问题,但是编辑时,不重新选择的话,会报错
代码展示
<el-form v-model="result" :rules="rule">
<el-form-item label="时间" prop="update">
<el-date-picker v-model="result.update" type="date"></el-date-picker>
</el-form-item>
</el-form>
<script>
export default {
created(){
this.getData()
},
data(){
return{
result: {
update:'',
},
rules: {
update:[{type:'date',required:true,message:'请输入时间',trigger:'change'}]
},
}
},
methos: {
getData(){
//请求数据queryData返回后赋值,返回值格式2018-05-04
this.result.update=queryData //第一种方式
this.result.update=new Date(queryData) //第二种方式
},
}
}
</script>
报错现象
- 如果是第一种方式,那么会直接报错:vaule.getTime is not a function
- 如果是第二种方式,那么编辑时,如果不修改时间直接保存,那么后台存入的数据不是日期而是日期时间格式,即本应该2018-05-04,但存入的是2018-05-04 08:00:00
问题原因
- 第一种方式,因为在created()方法里执行的时候,有可能返回undefined等类型,但是校验规则里会校验,此时会报错
- 第二种方式,因为new Date()方式会把2018-05-04这种以-连接并有0的ISO时间格式用格林尼治国际标准时的时区计时(js时间Date对象介绍及解决getTime转换为8点的问题)返回,后台未经处理然后直接返回所以格式错误
解决方式
- 修改rules内容为:
update:[{required:true,message:'请输入时间'}]
- 如果rules内容不修改,则必须保证后台返回数据赋值的时候是'2018-05-04'或者空字符串''
- 使用第一种方式,不进行处理返回的日期格式字符串
所有评论(0)