日期时间

日期年月日范围选择

开始-结束时间选择

校验成功之后需要 需要'重置表单'才能再次校验

校验 重置表单

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="actualStartTime" label="实际时间">
                <SksDateYmdRange @clearValidate="clearFormValidate"
                                 :formData="form"
                                 startTimePropName="actualStartTime"
                                 endTimePropName="actualEndTime"
                >
                </SksDateYmdRange>
            </el-form-item>
            <el-form-item>
                <sksButton type="primary" @click="submitMainDialog">校验</sksButton>
                <sksButton type="danger" @click="resetForm('form')">重置表单</sksButton>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    // import {sksDialogFormMixin} from "./dialog-form";

    export default {
        // mixins: [sksDialogFormMixin],
        data() {
            return {
                form: {
                    actualStartTime: undefined,
                    actualEndTime: undefined,
                },
                rules: {
                    actualStartTime: [
                        {required: true, message: "不能为空", trigger: "change"}
                    ],
                }
            }
        },
        methods: {
            clearFormValidate(propName) {
                this.$refs?.form?.clearValidate(propName)
            },
            submitMainDialog() {
                this.$refs?.form?.validate((valid) => {
                })
            },
        }
    }
</script>

显示代码 复制代码 复制代码