其他分享
首页 > 其他分享> > element ui --- el-date-picker 日期组件无法正常回显的问题

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

标签:picker,el,templateData,set,trim,回显,replaceAll,后台,格式
来源: https://www.cnblogs.com/zhu-xl/p/14653125.html