場景

前端需要獲取24小時制的時間引數並傳遞到後臺儲存到資料庫。

在資料庫中儲存的是

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

首先前端使用ElemetUI的el-time-picker時間範圍選擇控制元件。

官方示例程式碼

<template>
  <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="
 
開始時間"
    end-placeholder="結束時間"
    placeholder="選擇時間範圍">
  </el-time-picker>
  <el-time-picker
    is-range
    arrow-control
    v-model="value2"
    range-separator="至"
    start-placeholder="開始時間"
    end-placeholder="結束時間"
    placeholder="選擇時間範圍">
  </el-time-picker>
</template>

<script>
  export 
 
default {
    data() {
      return {
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      };
    }
  }
</script>

其他屬性說明等參見官方文件：

https://element.eleme.cn/#/zh-CN/component/time-picker

首先在頁面上新增一個el-time-picker

            <el-time-picker
                is-range
                format="HH:mm"
                value-format="HH:mm"
                :style="{width: '100%'}"
                start-placeholder="開始時間"
                end-placeholder="結束時間"
                range-separator="至"
                clearable
                @change="changesjfw(scope.row)"
                v-model="bcglXiangXiList.sjfw"
              ></el-time-picker>

這個獲取的時間範圍繫結的model是一個String的陣列，類似下面這種

sjfw: ["07:30", "07:30"],

在將這個控制元件的值傳遞給後臺時傳遞的是上面這種String的時間陣列，而我們在資料庫中

儲存的往往是是將這個時間分成兩個，一個是開始時間一個是結束時間。

所以我們在請求後臺介面時需要將此陣列根據逗號取出來兩個時間範圍。

    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];

其中element就是bcglXiangXiList.sjfw傳遞給方法的時間範圍陣列，

然後bcxiangxi是在請求後臺介面時新建的物件

var bcxiangxi  = {};

作為傳遞引數用，並且設定其兩個屬性為開始時間和結束時間並分別取得時間範圍。

在後臺接受引數時的實體類對應的兩個屬性

    /** 開始時間 */
    private String dkkssj;
    /** 結束時間 */
    private String dkjssj;

這樣就通過post請求獲取傳遞的兩個時間範圍引數。

在設計資料庫時將這兩個欄位設定為varchar型別的。

這是在新增時將範圍陣列進行拆分，如果是在編輯時需要對控制元件進行賦值

            bcxiangxi.sjfw = new Array();
            bcxiangxi.sjfw[0] = item.dkkssj;
            bcxiangxi.sjfw[1] = item.dkjssj;

接可以通過這種將連個拼接的形式將後臺傳遞的兩個範圍字串拼接成字串陣列，進而賦值給

控制元件對應的data