1)问题
在工作中我们会经常使用el-time-picker
组件来实现开始时间和结束时间的选择,但是element
并没有直接提供给我们可以通过有范围限制的选择,而需要我们自己使用picker-options
属性结合selectableRange
参数实现时间选择框的选择范围规则
2)分析时间选择范围规则
-
开始时间选择框
- 如果有结束时间,则00:00:00-结束时间
- 没有结束时间,则00:00:00-23:59:59
-
结束时间选择框
- 如果有开始时间,则开始时间-23:59:59
- 如果没有开始时间,则00:00:00-23:59:59
3)代码实现
我们将picker-options
属性值写在computed
计算属性中(也可以以对象的形式赋值给picker-options
属性值,可以根据自己写代码的习惯来决定何种方式)
computed: {
// 开始时间
startTimeOptions() {
return {
selectableRange: `00:00:00-${this.form.endTime ? this.form.endTime : '23:59:59'}`
}
},
// 结束时间
endTimeOptions() {
return {
selectableRange: `${this.form.startTime ? this.form.startTime : '00:00:00'}-23:59:59}`
}
}
}
将上面的计算属性赋值给picker-options
属性
<el-form-item label="开始时间:">
<el-time-picker
v-model="form.startTime"
placeholder="开始时间"
:picker-options="startTimeOptions"
>
</el-time-picker>
</el-form-item>
<el-form-item label="结束时间:">
<el-time-picker
v-model="form.endTime"
placeholder="结束时间"
:picker-options="endTimeOptions"
>
</el-time-picker>
</el-form-item>