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了一個屬性值。