1、在项目中用到了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>
 

选择日期的时候格式并没有问题，如下：

 

但是由于它的格式问题我们实际上获取到数据格式是：

 

 

 

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

 

 

3、解决方案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

4、解决方法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,官方文档解释如下：

 

 

戳这里✔️ 日期格式