elementUI from表单必填项日期时间范围已有值但是提示信息还在

如果 elementUI form 表单必填项日期时间范围已有值但是提示信息还在，很可能是因为验证规则中设置了手动触发验证，即 `trigger: 'manual'`，导致表单验证未能及时触发。解决方法是，将验证规则中的 `trigger` 属性设置为 `'change'` 或 `'blur'`，这样在表单值发生改变或者表单项失去焦点时，验证规则就会被触发，从而更新表单验证状态和提示信息。示例代码如下：

// 验证规则
rules: {
  // 必填项日期时间范围
  dateRange: [
    { required: true, message: '请选择日期时间范围', trigger: 'change' }
  ]
}

另外，也有可能是因为表单项的 `prop` 属性值与验证规则中的字段名不一致，导致验证规则无法正确匹配表单项，从而不能正确显示提示信息。因此，需要检查一下表单项的 `prop` 属性是否正确。

相关问题

使用elementUI的Slider 滑块写日期时间选择器表单

可以使用elementUI的DatePicker和TimePicker组件来实现日期时间选择器表单，然后再结合Slider滑块来实现时间的快速选择。

示例代码如下：

<template>
  <div>
    <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
    <el-time-picker v-model="time" placeholder="选择时间"></el-time-picker>
    <el-slider v-model="sliderValue" :min="0" :max="23" :step="1" :show-input="true" :show-tooltip="false"></el-slider>
    <div>选择的日期时间：{{ date }} {{ time }}:{{ sliderValue }}:00</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      time: '',
      sliderValue: 0
    }
  }
}
</script>

在上面的代码中，我们首先使用了DatePicker组件和TimePicker组件来分别选择日期和时间。然后，我们使用了Slider滑块来选择小时数，最后将选择的日期时间展示出来。

需要注意的是，Slider滑块的最小值为0，最大值为23，步长为1，展示方式为输入框形式，同时不显示提示框。

vue中表单提交有必填项未填写自动跳转到第一个地方

在Vue中实现表单提交时，如果存在必填项未填写的情况，可以通过以下步骤实现自动跳转到第一个未填写的必填项处。

首先，给每一个必填项添加一个唯一的标识符，例如使用`ref`属性。

然后，在提交表单的方法中，可以使用Vue的`$refs`来获取所有的必填项，然后使用循环遍历这些必填项。

在遍历的过程中，判断每个必填项是否已经填写，如果未填写，则使用`this.$refs.xxx.focus()`将焦点定位到该必填项上，xxx为该必填项的标识符。

同时，在触发表单提交的按钮上使用`@click.prevent`来阻止默认的提交行为，从而避免页面的刷新。

最后，可以在必填项的上方或下方添加一个提示信息，提示用户该字段为必填项，并通过CSS样式对该提示信息进行一定的美化，以便用户更易于注意到未填写的必填项。

综上所述，通过给必填项设置标识符、使用`$refs`获取并定位焦点、阻止默认提交行为和添加必填项提示信息，可以实现在Vue中表单提交时自动跳转到第一个未填写的必填项处。这样可以提升用户的操作体验，避免填写遗漏，减少用户的错误提交。