使用element ui 日期選擇器獲取值後的格式問題

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,官方文件解釋如下：

戳這裡✔️ 日期格式