记录自己踩过的坑。
el-date-picker 日期组件默认时间格式为 value-format="yyyy-MM-dd",后台正常返回数据却无法正常回显的问题,找了半天原因,因为格式问题,后台返回的数据格式为yyyy.MM.dd。 查看后台返回的值是否含有空格,关于我的问题解决方式为,代码如下:<el-form-item :prop=" ruleForm.servicePeriodType == '1' ? 'serviceDate' : 'none'"> <el-date-picker v-model.trim="ruleForm.serviceDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker> </el-form-item>
js 如下:
if ( this.templateData.serviceStartDate && this.templateData.serviceEndDate && this.templateData.servicePeriodType == 1 ) { this.$set(this.ruleForm, "serviceDate", [this.templateData.serviceStartDate.replaceAll(".", "-").trim(),this.templateData.serviceEndDate.replaceAll(".", "-").trim()]); }
replaceAll(".", "-").trim()转换了一下格式后又去除了空格,完美解决问题。这里我没有在data里定义serviceDate,为了能给正常渲染,直接选择了$set 给this.ruleForm set了一个属性值。