element中的時間選擇器

TimePicker

以任意時間範圍做演示實例

<el-table-column label="上課時間段" style="margin-bottom: 10px; padding-left: 80px">
    <el-time-picker
        is-range
        v-model="ruleForm.timeRange"
        value-format="HH:mm"
        range-separator="至"
        start-placeholder="開始時間"
        end-placeholder="結束時間"
        placeholder="選擇時間範圍">
     </el-time-picker>
</el-table-column>

注意事項

• value-format 是對顯示類型看起來是對顯示時顯示數據的規定，其實他還有一個重要的作用就是如果你要向後臺保存數據，他所規定的就是你你向後臺傳的數組的內容。
• 這樣來說：
  • 如果你不加這個屬性，在控制檯打印的數據就類似與這樣
    • 2019-03-31T16:00:00.000+0000
  • 如果添加了這個屬性就只打印指定的數據,類似與這樣
    • 16:00:00

簡單的對數據進行一下處理

• 數據庫中這個字段所需要傳入的是varchar類型
• 向後臺傳遞時

// 因爲is-range是一個時間段，是一個數組包含開始和結束
params.timeRange = _this.ruleForm.timeRange[0]+"-"+_this.ruleForm.timeRange[1]

• 當從後臺獲取傳遞到前臺時

// 首先將獲得的時間字符串通過 - 進行切割，成爲一個長度爲2的數組
var arr = (resp.data.data.timeRange).split("-");
// 將數組賦值給頁面上綁定的屬性，就可以直接回顯
_this.ruleForm.timeRange = arr;