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>
效果如下:
获取到的数据如下: