element中的时间选择器

最新推荐文章于 2025-06-30 20:49:31 发布

现充爆破师

最新推荐文章于 2025-06-30 20:49:31 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_43642812/article/details/89219438

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用Element UI的时间选择器TimePicker，并重点讨论它在数据处理方面的作用，特别是如何将时间选择器的输出格式化为适合后台存储的字符串。通过设置特定属性，可以控制传递给后台的数据格式，例如从'2019-03-31T16:00:00.000+0000'转换为'16:00:00'。同时，由于数据库字段需要varchar类型，因此在前后端交互时，正确处理时间数据至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;