vue 時間日期控件的綁定值

最近的項目一直有用到element的時間日期控件，積累了點經驗

• date-picker

在子組件el-dialog中用到了date-picker，我從父組件傳過去的值是類似’2020-01-01‘的日期字符串，嘗試過好幾種方法，遇到的一個難題就是，第一次打開dialog會顯示值，但是在關閉dialog后重新打開，控件上不顯示值

<el-date-picker
  v-model="form.startEnd"
  type="daterange"
  unlink-panels
  range-separator="~"
  start-placeholder="開始日期"
  end-placeholder="結束日期"
/>

 // this.form.startEnd[0] = new Date(Date.parse(row.dateFrom))
 // this.form.startEnd[0] = new Date(row.dateFrom.replace(/-/, '/'))
 this.form.startEnd[0] = row.dateFrom

打印了日志發現值傳過去了，控件綁定的變量和第一次打開時的值也一樣，但就是不顯示值，就很氣人，奈何剛剛接觸vue，學識淺薄，不知道該怎么解決這個坑，於是在dialog前面加了個v-if，強制每次打開時都是一個新的dialog

• time-picker

同樣的，在父組件向子組件傳值的時候，值傳過去了，但是不顯示，或者顯示的是當前時間，傳過去的string類似於’18：00：00‘

<el-time-picker
  v-model="form.time1_start"
  :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
  arrow-control
  placeholder="開始時間"
/>

 // this.form.time1_start = this.string2DateFormat(row.startTime1)
this.form.time1_start = '2020-01-01 ' + row.startTime1

怪我沒仔細看api，這里的time需要指定日期，在時間前面拼接一個日期就好了