element ui --- el-date-picker 日期组件无法正常回显的问题

记录自己踩过的坑。

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了一个属性值。