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,官方文档解释如下:
戳这里✔️ 日期格式