校验规则
rules: {
dateRange: [{
type: 'array',
required: true,
message: '请选择日期区间',
fields: {
0: {
// type: 'string', //tpye类型试情况而定,所以如果返回的是date就改成date
required: true,
trigger: "change",
message: '请选择开始日期'
},
1: {
type: 'string',
required: true,
trigger: "change",
message: '请选择结束日期'
}
}
}]
}
日期赋初值
用$set
方法,如果直接使用=
,后续修改和清除都会失效
...
//日期区间回显
this.$set(this.formData, 'dateRange', [res.data.startDate, res.data.endDate])
<template>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="125px">
<el-form-item label="销售时间" prop="timeRange">
<el-date-picker
v-model="formData.timeRange"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
@change="handleInput"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
></el-date-picker>
</el-form-item>
...
</el-form>
</template>
<script>
export default {
data() {
return {
// 表单数据
formData: {},
rules: {
timeRange: [{
type: 'array',
required: true,
message: '请选择日期区间',
fields: {
0: {
// type: 'string', //tpye类型试情况而定,所以如果返回的是date就改成date
required: true,
trigger: "change",
message: '请选择开始日期'
},
1: {
required: true,
trigger: "change",
message: '请选择结束日期'
}
}
}],
}
};
},
methods: {
...
// 刷新input
handleInput() {
this.$forceUpdate();
},
}
};
</script>