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 是对显示类型看起来是对显示时显示数据的规定

• 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;