Element之el-date-picker表单校验(数组类型数据校验)和数据回显问题

校验规则

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>