ElementUI el-time-picker踩坑-只显示小时、分钟，分并添加范围校验

开始时间设置：

<el-time-picker
    v-model="form.preClockOffTime"
    class="date-box"
    format='HH:mm'     设置下拉框时间格式
    value-format="HH:mm"    设置返回值时间格式
    :picker-options="{
        校验开始时间不的大于结束时间或最大时间值
        selectableRange:`00:00:00 -${form.nextClockInTime ? form.nextClockInTime+':00' : '23:59:00'}`
    }">
</el-time-picker>

结束时间设置：

<el-time-picker
    v-model="form.nextClockInTime"
    format='HH:mm'
    value-format="HH:mm"
    :picker-options="{
        设置结束时间不得早于开始时间或时间最小值
        selectableRange:`${form.preClockOffTime ? form.preClockOffTime+':00' : '00:00:00'}-23:59:00`
    }">
</el-time-picker>

核心设置：

format：设置下拉框时间列表格式；

value-format：设置返回值格式

picker-options：设置selectableRange实现选择范围的确定，此处动态设需要拼接“秒”的值

效果图：

开始时间

结束时间

ps：分钟选择未出现禁止选择但是当选择小于开始时间的值时会重置至开始时间！