<el-date-picker v-model="InquirySubForApprovalDate" type="date" placeholder="请选择时间" value-format="'YYYY-MM-DD'" size="mini" />把el日期设置必填项
时间: 2023-07-21 12:09:19 浏览: 165
要将 `el-date-picker` 设置为必填项,你可以使用 `rules` 属性结合校验规则来实现。首先,你需要在 `data` 中定义一个校验规则:
```javascript
data() {
return {
InquirySubForApprovalDate: '', // 绑定的日期变量
dateRules: [
{ required: true, message: '请选择时间', trigger: 'change' }
]
};
}
```
然后,将 `rules` 属性设置为上述校验规则:
```html
<el-date-picker v-model="InquirySubForApprovalDate" type="date" placeholder="请选择时间"
value-format="'YYYY-MM-DD'" size="mini" :rules="dateRules" />
```
在这个例子中,`dateRules` 是一个包含了必填项校验规则的数组。`required: true` 表示该字段为必填项,`message` 属性定义了校验失败时的提示信息,`trigger: 'change'` 表示在日期发生改变时进行校验。
这样设置后,如果用户没有选择日期,会触发校验失败,并显示出相应的提示信息。
希望这能帮到你!如果还有其他问题,请随时提问。
相关问题
<el-date-picker v-model="OrderDate" type="date" placeholder="请选择时间" value-format="'YYYY-MM-DD'" size="mini" /> 在el组件前加个星号
要在 `<el-date-picker>` 组件前添加一个星号,您可以使用伪元素 `::before` 或 `::after` 来实现。以下是一个示例:
```html
<span class="star">*</span>
<el-date-picker v-model="OrderDate" type="date" placeholder="请选择时间" value-format="'YYYY-MM-DD'" size="mini" />
```
```css
.star::before {
content: "*";
color: red;
margin-right: 5px;
}
```
上述代码将在 `<el-date-picker>` 组件前创建一个 `<span>` 元素,并使用 CSS 伪元素 `::before` 在其中添加一个红色的星号。您可以根据需要自定义星号的样式,比如改变颜色、大小、位置等。请注意,这只是一个示例,您可以根据实际情况进行修改。
后端使用 private List<Date> exeTime;前端 <el-form-item label="执行时间" prop="exeTime"> <el-date-picker clearable v-model="queryParams.exeTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择创建时间"> </el-date-picker> </el-form-item>查询不来数据数组返回为空
前端传递的参数是一个 Date 类型的数组,而后端接收的参数是一个 List<Date> 类型的,需要在前端传递参数时将数组转换为 List。可以在前端代码中使用 JavaScript 的 Array.prototype.map() 方法将 Date 类型的数组转换为字符串类型的数组,然后再传递给后端。修改后的代码如下:
```
<el-form-item label="执行时间" prop="exeTime">
<el-date-picker clearable
v-model="queryParams.exeTime"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
placeholder="请选择创建时间">
</el-date-picker>
</el-form-item>
<script>
export default {
data() {
return {
queryParams: {
exeTime: []
}
};
},
methods: {
search() {
// 使用 Array.prototype.map() 方法将 Date 类型的数组转换为字符串类型的数组
let exeTime = this.queryParams.exeTime.map(item => {
return item.toLocaleString();
});
// 将转换后的参数传递给后端
let params = {
exeTime: exeTime
};
// 发送请求
axios.get('/api/data', { params: params })
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
});
}
}
}
</script>
```
这样就可以将前端传递的参数转换为后端需要的 List 类型了。