<el-time-picker v-model="form.ScarTime" format="HH:mm" placeholder="请选择发车时间" @change="sxGocarTime" ></el-time-picker>怎么回显
时间: 2024-02-10 13:07:12 浏览: 78
如果你要回显 `el-time-picker` 组件的值,你需要将该组件的 `v-model` 绑定到一个变量上,例如:
```
<el-time-picker v-model="form.ScarTime" format="HH:mm" placeholder="请选择发车时间"></el-time-picker>
```
在这里,`form.ScarTime` 就是该组件绑定的变量,你可以在对应的数据中心中给这个变量赋值来回显该组件的值,例如:
```
data() {
return {
form: {
ScarTime: '10:30' // 默认回显值
}
}
}
```
当你需要修改回显值时,只需要修改该变量的值即可,例如:
```
this.form.ScarTime = '14:00'
```
这样就会将回显值修改为 `14:00`。
相关问题
<el-date-picker v-if="extend.ctrlType == 'NDateTimePicker'" style="width: 100%" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.extend[extend.code]" type="datetime" :placeholder="'请选择' + extend.name"> </el-date-picker>
这段代码是一个使用了 Element UI 框架的日期选择器组件,其中 `v-if="extend.ctrlType == 'NDateTimePicker'"` 表示如果 `extend.ctrlType` 属性等于 `'NDateTimePicker'`,则渲染该组件。`style` 属性设置组件的宽度为 100%。`format` 属性设置日期时间的显示格式为 `yyyy-MM-dd HH:mm:ss`,`value-format` 属性设置 v-model 绑定的值的格式也为 `yyyy-MM-dd HH:mm:ss`。`v-model` 绑定了表单 `form` 中 `extend.code` 属性对应的值。`type` 属性设置为 `datetime`,表示该选择器是一个日期时间选择器。`:placeholder="'请选择' + extend.name"` 表示选择器的占位符为 `'请选择' + extend.name'`。
<el-form-item label="颁发日期" :rules="[{ required: true, message: '颁发日期不能为空' }]"> <el-date-picker v-model="formData.promulgateDate" value-format="yyyy-MM-dd" type="year" placeholder="选择年" :style="{ width: '33%' }" > </el-date-picker> </el-form-item> <el-form-item label="实施日期" :rules="[{ required: true, message: '实施日期不能为空' }]"> <el-date-picker v-model="formData.execDate" value-format="yyyy-MM-dd" type="year" placeholder="选择年" :style="{ width: '33%' }" :picker-options="expireTimeOption" > </el-date-picker> </el-form-item> <el-form-item label="失效日期" :rules="[{ required: true, message: '失效日期不能为空' }, { validator: (rule, value, callback) => checkExpiryDate(rule, value, callback, formData.promulgateDate), trigger: 'blur' }]"> <el-date-picker v-model="formData.expiryDate" value-format="yyyy-MM-dd" type="year" placeholder="选择年" :style="{ width: '33%' }" :picker-options="expiryDateOption"> </el-date-picker> </el-form-item>写下必填的校验规则
这段代码中,有三个表单项需要进行必填校验。规则如下:
1. 颁发日期:必填,不能为空。
2. 实施日期:必填,不能为空。
3. 失效日期:必填,不能为空,且需要进行日期有效性校验,即失效日期必须晚于颁发日期。其中,日期有效性校验的验证器为 checkExpiryDate() 方法,触发时机为失效日期控件的失焦事件(blur)。
阅读全文