使用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,官方文檔解釋以下：

 

 

戳這裏✔️ 日期格式