使用el-time-picker实现开始时间和结束时间选择

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>