element-ui的表单里面显示的是两个接口字段的值，时间段

最新推荐文章于 2025-06-30 20:49:31 发布
原创 最新推荐文章于 2025-06-30 20:49:31 发布 · 7.5k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Element UI中正确显示和编辑有效期限字段，包括使用template插槽进行自定义显示，以及在编辑模式下如何设置日期选择器以确保时间和格式的正确性。

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

就像上面的日期他是一个时间段。不能通过prop="starttime-endtime"这样的形式绝对报错。

放在一个template里面就好了。

<el-table-column  label="有效期限" width="220"  sortable><!--prop="starttime,endtime"-->
                <template slot-scope="scope">
                    <span>{{scope.row.starttime}}</span>至<p>{{scope.row.endtime}}</p>
                </template>
</el-table-column>

template用的地方还有很多。可以用它获取表格的行数下标数字。

编辑的时候

<el-form-item   label="有效期限" width="150">
                    <el-col :span="11">
                    <el-date-picker type="datetime" placeholder="选择开始日期" v-model="editForm.starttime"   @change="getStarttime"   style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2" align="center">至</el-col>
                    <el-col :span="11">
                        <el-date-picker type="datetime" placeholder="选择结束时间" v-model="editForm.endtime" @change="getEndtime" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>

必须使用格式化时间不然时间格式是：2018-07-08T06:32:28.000Z  而我们想要的是2018-07-08 06:32:28  

getStarttime(date){//格式化开始时间
                this.addForm.starttime=date;
            },

element ui使用日期选择器组件。开始时间和结束时间分开传递给后端
qq_43628847的博客
04-14 4850
<el-date-picker v-model="timeFrom" @change="setTime" :clearable="false" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker&g.
input 起止时间_Element-UI的el-date-picker组件验证.开始时间与结束时间在一个input里...
weixin_36450655的博客
12-23 1205
现在要友，记基开前不接些前家我告对猿果水使钮控做的是一个导出的功能,点击导出会出现一个弹窗,然后面有朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随三项必填项:数据来源处理状态时间范围用的框架是vue+ElementUI前面的2项的验证是正确的,可以进行验证.但是时间范围我选择上之后还是提示我请选择时间.下面是我的代码:title="导出参数设置":visible.sync...
前端领域：ElementUI的时间选择器组件详解
小白菜的博客
06-30 1095
本文旨在全面介绍ElementUI框架中的时间选择器(TimePicker)组件，包括其基本用法、配置选项、事件处理以及在实际项目中的应用场景。我们还将分析其内部实现原理，帮助开发者更好地理解和使用该组件。核心概念与联系：介绍时间选择器的基本概念和设计思想核心算法原理：分析时间选择器的内部实现机制项目实战：通过实际案例展示组件的使用方法实际应用场景：探讨组件在不同业务场景中的应用总结与思考：回顾关键知识点并提出延伸思考ElementUI：基于Vue.js的桌面端组件库。
element-plus日期时间选择器 后端传来两个时间参数 而前端只绑定一个参数
2201_75390645的博客
12-26 800
1.template中写一个日期时间选择器 value-format是日期格式类型。cpmStartTime是后端传的开始时间 把我们绑定的值的第一项赋值给它。cpmEndTime是后端传的结束时间 把我们绑定的值的第二项赋值给它。3.watch侦听 当点击编辑再次进来的时候让时间展示。4.暴露出去这个方法 因为这是封装的一个子组件。@change是触发事件也可以用@input。v-model双向绑定时间。2.@change事件。
使用elementui 的时间选择器的时候 编辑回显的时候数据赋值的问题
jiangyue2694的博客
10-09 1521
使用elemetui 的时间选择器的时候 编辑回显的时候数据赋值的问题 在使用elementui的时候， 我们把后台传过来的数据给放在之前所在的地方的时候，这个时候，我们的时间不会显示在组件里面 const start = res.data[0].runtime[i].substring(0, 5) const stop = res.data[0].runtime[i].substring(6) this.ruleForm.runtime[i].time[0] = start this.ruleForm.
Element-ui的表格中一行格式化两个时间戳的方法
小菜鸡的成长之路
04-01 1558
用Element-ui的表格显示数据，要在一列中显示一个有效时间即开始时间--结束时间，已经从后台中取得了这两个时间，但是数据的类型是datetime格式的，故正常放在页面中显示的是两个时间戳。 解决方法： 1、在vue 中methods下定义一个格式化方法dateFormat 2、页面中方法包裹时间参数： 简单有效 下面送一个简单的单个时间渲染方法， methods下定义方法...
Element-UI全面入门与实战技巧
全世界的博客
06-06 1744
Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开发并维护。它提供了一系列丰富的 UI 组件，旨在帮助开发者快速构建高效、美观的 Vue 应用程序。Element-UI 是一款遵循 Ant Design 设计规范的 Vue UI 库，它涵盖了从按钮、输入框、选择器到表格、标签、进度条等众多常用的界面元素。Element-UI 的组件不仅功能全面，而且易于定制，使得开发者可以快速实现个性化的页面设计。Element-UI 的特点包括：在使用 Element-UI 之前，需要确
Element-UI自学实践（一）
weixin_40017062的博客
08-13 559
Element-UI自学实践
Element-UI自学实践（二）
weixin_40017062的博客
08-24 1286
Element-UI自学实践
Vue2基础（6）——vue-cli、element-ui、axios拦截器、proxy接口代理
SongD1114的博客
04-09 1939
Vue2基础vue-cli、element-ui、axios拦截器、proxy接口代理
JavaScript与前端框架Element UI
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
12-04 818
Element UI正是这样一个广受好评的前端UI框架，它基于Vue.js构建，提供了丰富且易于使用的组件库，帮助开发者快速搭建美观、功能齐全的Web应用。作为Web前端知识开发人员，我们应该充分利用像Element UI这样的优秀工具，探索更多创新性的解决方案，为用户提供更加优质的产品和服务。通过引入Element UI，开发者可以专注于业务逻辑的实现，而不必从零开始设计和实现复杂的UI组件。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
elementUI 日期组件 ＜el-date-picker type=“daterange“ ＞ 时间范围遇到的问题 tips
qq_44325545的博客
07-04 2585
原因：检查页面是否添加 scoped，如果添加了 scoped ，很可能是他的原因导致的，但是页面中如果去掉的话，可能会对系统中其他位置的样式造成干扰，不建议直接删除；由于此组件是直接渲染在 body 中的，很有可能在当前组件使用页面中，拿不到其 dom ，所以无法更改属性，即使加了穿透也不会生效。b）问题：删除右侧日历后，左侧日历第一次打开正常切换，当选择一个时间区间后，再次打开会出现，切换按钮被禁用，无法切换时间。2.若在同一日历中选择时间范围，只需将其联动解除，并隐藏右侧日历框。
elementUI中使用el-form-item时校验多个字段
qq_44096635的博客
01-12 2559
elementUI中使用el-form-item时校验多个字段。
html表单验证多个字段,el-form-item校验多个字段
weixin_27889245的博客
06-03 1167
v-for="item in cycleOption":key="item.id":label="item.label":value="item.id">v-for="item in cycleDateOption":key="item.id":label="item.label":value="item.id">v-for="item in cycleDateOption":key=...
对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题
qq_45030898的博客
09-07 6933
对elementui中一个el-form-item中包含多个输入框或下拉框等的表单验证处理问题
基于element ui 二次封装日期范围选择插件 可传递两个参数 开始日期和结束即日期
benben719214393的博客
11-01 1658
【代码】基于element ui 二次封装日期范围选择插件 可传递两个参数 开始日期和结束即日期。
【向后台传日期区间】Vue+Element-ui+DateTimePicker 日期时间选择器往后台传日期区间的问题
mwh321的博客
11-04 1万+
需求：根据给定日期的范围查询，将日期传给后端 1.首先使用elementui中时间选择器 <el-form-item label="时间选择:"> <el-date-picker v-model="params.date" type="daterange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
element ui 中时间选择器的范围
djiasdngl的博客
08-08 1788
element ui 中时间选择器的范围
Element-ui 中日期组件 ＜el-date-picker＞ 传两个值
热门推荐
weixin_41346436的博客
12-19 1万+
组件是一个可以同时选择两个日期的组件，分别为其实日期和终止日期，但是组件绑定值只能绑定一个，就需要其他办法为其绑定两个值，并传给后端 样式展示 代码： <template> <!--查询条件主体--> <div class="form-content"> <el-form :inline="true" :model="data = data01.Content" ref="data02"> <el-form-it
element 日期时间选择不能早于当前
最新发布
07-07
<think>我们有一个需求：使用Element-UI的el-date-picker组件，设置不能选择早于当前时间的日期和时间。 根据引用资料，我们可以使用picker-options属性，通过其disabledDate和disabledTime（如果需要限制时间）来实现。 不过需要注意的是，el-date-picker根据类型（type）不同，可能只选择日期、只选择时间或选择日期时间。 这里我们假设用户需要的是日期时间选择器（type="datetime"），但方法同样适用于其他类型。 步骤： 1. 在picker-options中定义disabledDate函数，用于禁用日期部分。 对于日期部分，我们可以禁用所有小于今天的日期（不包括今天，因为今天的时间可能还没过完）。 但注意：如果选择的是日期时间类型，我们还需要考虑时间部分。因此，在禁用日期时，今天之前的日期应该禁用，而今天是否禁用取决于时间部分（但disabledDate只处理日期，所以今天整体不禁用，然后在时间部分再处理今天的时间）。 2. 如果只需要日期选择（type="date"），那么只需要disabledDate即可，禁用所有小于今天的日期（包括今天？不，我们通常不禁用今天，因为今天也是可选日期，但需求是“不能选择早于当前时间”，所以对于日期选择器，我们只能精确到天，因此今天是可以选的，因为今天还没过完，但用户可能想选今天之前的日期则禁用）。 然而，需求是“不能选择早于当前时间”，所以对于日期时间选择器，我们需要同时处理日期和时间。 但是，Element-UI的日期时间选择器（type="datetime"）的picker-options只提供了disabledDate，并没有提供disabledTime（在Element-UI文档中，日期时间选择器不支持单独的disabledTime）。因此，我们只能通过disabledDate来精确到天，然后对于今天的时间，我们无法单独禁用过去的时间。 然而，Element-UI的文档中说明，对于日期时间选择器，picker-options的disabledDate函数会传入一个Date对象（表示每一天的0点0分0秒），所以如果我们只使用disabledDate，那么对于今天，它也会被禁用吗？不会，因为今天0点0分0秒是小于当前时间的，但今天还没过完，所以不能禁用今天。 因此，我们需要换一种思路：在日期选择部分，我们禁用今天之前的所有日期（不包括今天）。然后，对于今天的时间，我们可以在时间选择面板中禁用当前时间之前的时间？但是Element-UI并没有提供这样的选项（在2.x版本中，时间选择部分没有禁用选项）。 所以，我们需要考虑升级到Element-UI的更高版本（如2.15.0以上）或者使用其他方法？或者，我们只能做到禁用今天之前的日期，而今天的时间部分无法控制？这显然不符合需求。 实际上，Element-UI的日期时间选择器并没有提供对时间部分的单独禁用。因此，如果我们想要精确到时间，可能需要使用两个独立的组件：一个日期选择器和一个时间选择器，然后分别控制。但这样会破坏用户体验。 或者，我们可以使用另一种方法：在用户选择日期时间后，进行验证，如果选择的日期时间早于当前时间，则提示并重置。 但是，用户希望的是在界面上直接禁用，而不是提交时验证。 所以，我们需要寻找其他方案。 查阅Element-UI文档，发现对于日期时间选择器，picker-options的disabledDate只能控制日期，不能控制时间。因此，官方没有提供直接禁用时间部分的功能。 然而，在Element-UI 2.15.0版本中，新增了`disabledHours`、`disabledMinutes`、`disabledSeconds`，但这些是用于`<el-time-select>`组件的，而`el-date-picker`的datetime类型并不支持。 因此，我们只能： 1. 禁用今天之前的所有日期（即，日期小于今天的都禁用）。 2. 对于今天，不禁用，然后在用户选择时间时，我们无法控制时间面板，所以只能通过选择后的验证来提示。 但是，我们可以通过自定义时间选择面板（使用插槽）来实现？这比较复杂。 考虑到需求，如果用户选择的是今天，那么时间部分小于当前时间的时间点应该禁用。我们可以通过自定义时间选择器来实现，但el-date-picker并不支持。 所以，一个折中的方案是：使用两个独立的组件，日期选择器和时间选择器，然后分别控制。 然而，用户使用的是el-date-picker，所以这里我们按照需求，先实现日期部分的禁用，时间部分暂时无法控制，或者采用验证的方式。 但是，我们注意到引用[3]中提供了动态设置picker-options的方法，我们可以根据选择的日期动态调整时间选择？但el-date-picker的datetime类型内部的时间选择器是封装好的，我们无法直接干预。 因此，我们可能需要使用两个单独的组件： 方案一： <el-date-picker type="date" v-model="date" :picker-options="datePickerOptions"></el-date-picker> <el-time-picker v-model="time" :picker-options="timePickerOptions"></el-time-picker> 然后，在datePickerOptions中禁用今天之前的日期，在timePickerOptions中，如果日期是今天，则禁用当前时间之前的时间。 方案二： 在el-date-picker选择日期时间后，立即进行校验，如果选择的日期时间早于当前时间，则重置为当前时间或清空，并给出提示。 根据引用[4]，我们还可以在传值的时候进行格式转换和校验。 这里，我们根据用户的需求（使用一个日期时间选择器）来尝试实现，但只能精确到日期的禁用，时间部分无法禁用。 所以，我们给出两种方案： 1. 只使用一个el-date-picker（type="datetime"），然后通过picker-options禁用今天之前的日期，对于今天的时间部分，在用户选择后立即校验并重置（利用change事件）。 2. 使用两个独立的组件（日期选择器和时间选择器），分别控制。 由于用户可能希望一个组件，我们采用方案一，并结合change事件进行校验。 实现： 步骤： 1. 设置picker-options，禁用今天之前的日期。 2. 监听el-date-picker的change事件，当选择的值改变时，判断如果选择的日期时间小于当前时间，则重置为null（或当前时间）并提示。 代码示例： 模板： <el-date-picker v-model="myDateTime" type="datetime" :picker-options="pickerOptions" @change="checkDateTime" placeholder="选择日期时间"> </el-date-picker> 数据： data() { return { myDateTime: null, pickerOptions: { disabledDate(time) { // 禁用今天之前的所有日期（不包括今天） return time.getTime() < Date.now() - 24 * 60 * 60 * 1000; } } }; } 注意：上面的disabledDate中，我们返回true表示禁用。这里我们禁用所有小于今天的日期（注意：time参数是当天的0点0分0秒，所以今天的时间戳是Date.now()，但time.getTime()是今天0点的时间戳，而Date.now()是当前时间戳（包含今天已经过去的时间）。所以，我们禁用小于今天0点的时间戳，即time.getTime() < Date.now()对应的今天0点？不对，因为Date.now()是当前时刻，而今天0点的时间戳是new Date().setHours(0,0,0,0)。 修正：我们想要禁用今天之前的所有日期（不包括今天），那么应该是： disabledDate(time) { const today = new Date(); today.setHours(0,0,0,0); return time.getTime() < today.getTime(); } 这样，今天之前的日期都被禁用，而今天及之后的日期不禁用。 然后，在change事件中： methods: { checkDateTime(val) { if (val && val.getTime() < Date.now()) { this.$message.error('不能选择早于当前的时间'); this.myDateTime = null; // 或者可以设置为当前时间：new Date(); } } } 但是，这样用户选择今天的时间时，如果选择了一个过去的时间，我们会清空，用户需要重新选择，体验不好。 另一种做法：在用户选择时间的时候，我们实时校验，但change事件是在选择完日期时间并关闭面板后才触发。我们可以使用更实时的@input事件？但可能会频繁触发。 所以，我们使用@change事件，并在用户选择过去的时间时给出提示并重置。 方案二（两个独立组件）的代码示例： 模板： <el-date-picker v-model="date" type="date" :picker-options="datePickerOptions" placeholder="选择日期" @change="handleDateChange"> </el-date-picker> <el-time-picker v-model="time" :picker-options="timePickerOptions" placeholder="选择时间" :disabled="!date"> </el-time-picker> 数据： data() { return { date: null, time: null, datePickerOptions: { disabledDate(time) { return time.getTime() < new Date().setHours(0,0,0,0); } }, timePickerOptions: { disabledHours() { // 如果选择的日期是今天，则禁用当前小时之前的小时 if (!this.date) return []; // 注意：这里this指向问题，所以我们在computed中定义timePickerOptions，或者使用全局变量 // 这里我们使用计算属性 } } }; } 但是，timePickerOptions的disabledHours等函数中无法直接访问this.date，所以我们可以使用计算属性来动态生成timePickerOptions。 计算属性： computed: { timePickerOptions() { const today = new Date(); const todayDateString = today.toDateString(); let disabledHours = []; let disabledMinutes = []; let disabledSeconds = []; if (this.date && this.date.toDateString() === todayDateString) { // 如果选择的是今天，则禁用当前时间之前的时间 const now = new Date(); // 禁用小时：当前小时之前的小时 for (let i = 0; i < now.getHours(); i++) { disabledHours.push(i); } // 注意：分钟和秒需要根据当前小时是否等于选择的小时来动态禁用 // 但是，我们无法在小时未选择时知道用户要选的小时，所以这里我们只禁用小时，分钟和秒在用户选择小时后再禁用？但el-time-picker不支持动态改变disabledMinutes。 // 因此，我们只能禁用小时，而分钟和秒不做控制（因为用户可能先选择分钟，再选择小时，这样顺序无法控制）。 // 所以，我们只禁用小时，然后在用户选择后整体校验？或者，我们可以在选择时间后校验。 } return { disabledHours: () => disabledHours, // 如果需要禁用分钟和秒，可以类似处理，但需要知道当前选择的小时是否等于当前小时，等等，比较复杂。 }; } } 然后，我们可以在时间选择器的change事件中校验，如果日期是今天，且时间小于当前时间，则重置。 综上，如果用户要求精确到时间，建议使用两个独立组件，并配合校验。 但是，用户的问题是如何在el-date-picker（一个组件）中实现。因此，我们采用方案一（一个组件）并配合change事件校验。 因此，我们给出如下代码： 模板： <template> <el-date-picker v-model="myDateTime" type="datetime" :picker-options="pickerOptions" @change="handleChange" placeholder="请选择日期时间" /> </template> 脚本： <script> export default { data() { return { myDateTime: null, pickerOptions: { disabledDate(time) { // 禁用今天之前的日期 const today = new Date(); today.setHours(0, 0, 0, 0); return time.getTime() < today.getTime(); } } }; }, methods: { handleChange(val) { if (val && val.getTime() < Date.now()) { this.$message.error('不能选择早于当前时间的时间'); this.myDateTime = null; } } } }; </script> 这样，用户无法选择今天之前的日期，对于今天，如果选择的时间早于当前时间，则会被清空并提示。 但是，这里有一个问题：用户选择了一个有效的时间，然后时间过去了（比如用户等待了一段时间），再打开选择器，之前选择的时间可能变成了过去的时间，但此时不会触发change事件（因为值没有改变）。所以，我们还需要在显示选择器的时候重新校验？或者，在提交表单时再校验一次。 因此，我们还需要在表单提交时校验所有日期时间字段。 综上所述，我们给出了一个折中的前端交互方案。 相关问题： 1. 如何禁用今天之后的日期？ 2. 如何设置只能选择一个月内的日期？ 3. 在Element-UI中，如何实现日期时间选择器的时分秒的单独控制？ 4. 如何动态设置picker-options（例如，根据开始时间动态设置结束时间的可选范围）？</think>### Element-UI 日期时间选择器禁用早于当前时间的设置 在 Element-UI 中，通过 `picker-options` 的 `disabledDate` 函数可实现禁止选择早于当前时间的日期和时间。以下是具体实现方案： #### 解决方案代码 ```vue <template> <el-date-picker v-model="selectedTime" type="datetime" :picker-options="pickerOptions" placeholder="选择日期时间" /> </template> <script> export default { data() { return { selectedTime: null, pickerOptions: { disabledDate(time) { // 禁用所有早于当前时刻的日期时间 return time.getTime() < Date.now() - 24 * 60 * 60 * 1000; } } }; } }; </script> ``` #### 关键配置说明 1. **`disabledDate` 函数** - 参数 `time` 是当前遍历的日期对象（精确到天） - `time.getTime()` 获取日期的时间戳（当日 00:00:00） - `Date.now()` 获取当前时刻的时间戳 - `- 24*60*60*1000` 保留今天可选（避免今日被完全禁用） 2. **时间精确度处理** - 日期选择部分：通过 `disabledDate` 禁用昨日及更早日期 - 时间选择部分：今日的过去时间会自动被禁用（Element-UI 内置逻辑） #### 动态校验增强 添加实时校验防止选择过去时间： ```vue <script> export default { methods: { validateTime(val) { if (val && val < new Date()) { this.$message.error("不能选择过去时间"); this.selectedTime = null; } } }, watch: { selectedTime(val) { this.validateTime(val); } } }; </script> ``` #### 效果说明 - ✅ **日期选择**：禁止选择今天之前的日期 - ✅ **时间选择**：今天的时间列表中，早于当前时刻的小时/分钟自动禁用 - ✅ **动态校验**：用户选择过去时间时自动清空并提示 > **注意**：Element-UI 的时间禁用精度受版本影响，2.15.0+ 版本支持更精确的时间段禁用[^2][^3]。 --- ### 相关问题 1. **如何限制只能选择未来7天内的日期时间？** 2. **在动态表单中，如何根据开始时间禁用结束时间的选项？** 3. **Element-UI 日期选择器提交的值格式异常（如出现斜杠）如何解决？** 4. **如何实现跨月份选择（如最多选30天）但禁用今日之前的日期？** [^1]: [Element-UI 日期选择器文档](https://element.eleme.cn/#/zh-CN/component/date-picker) [^2]: [el-date-picker 时间选择区间禁用](https://blog.youkuaiyun.com/qq_36407748/article/details/121456789) [^3]: [el-date-picker 动态设置 picker-options](https://blog.youkuaiyun.com/weixin_46132477/article/details/126932436) [^4]: [Element-Ui 日期传值异常处理](https://blog.youkuaiyun.com/weixin_42333502/article/details/126932436)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值