使用element ui 日期选择器获取值后的格式问题

一、在项目中用到了element ui里面的日期选择器，发现有格式问题，以下代码：

<template v-if="scope.row.edit">
    <el-date-picker
    class="stra-date-picker"
    size="small"
    v-model="scope.row.publish_time"
    type="date"
    placeholder="请选择日期">
  </el-date-picker>
</template>
<span v-else class="db ell" :title="scope.row.publish_time">{{ scope.row.publish_time }}</span>

选择日期的时候格式并无问题，以下：

 

可是因为它的格式问题咱们实际上获取到数据格式是：

 

 

 

二、知道问题后查看官方文档，有这么一段描述：

 

 

三、解决方案1（不适用于我这个项目，可是适用于大部分的项目）

因为在官方文档中，有提到能够使用change

<el-date-picker type="date" v-model="time" @change="formatTime" format="yyyy-MM-dd" placeholder="请选择日期"></el-date-picker>

而后在methods中，添加一个方法便可,代码以下：

formatTime(val) {
    this.time=val;
}

这个方法是直接将v-model里面的值改变，但因为个人项目日期里面v-model的值，是整个动态循环绑定的，不能知道当前的time值，因此可用下面的方法2

四、解决方法2（适用于个人项目，我的认为更加方便简洁）

代码以下：

<template v-if="scope.row.edit">
  <el-date-picker
    class="stra-date-picker"
    size="small"
    v-model="scope.row.publish_time"
    type="date"
    value-format="yyyy-MM-dd"
    placeholder="请选择日期">
  </el-date-picker>
</template>
<span v-else class="db ell" :title="scope.row.publish_time">{{ scope.row.publish_time }}</span>

效果以下：

 

获取到的数据以下：

 

 

主要是用了value-format,官方文档解释以下：

 

 

戳这里✔️ 日期格式