vue3 使用element 表单组件里面嵌套时间选择器并且进行校验

在Vue3中使用Element UI构建表单并集成时间选择器进行验证，可以按照以下步骤操作：

1. 首先，安装依赖：确保已经安装了Vue、Element UI和Vue的官方校验库vuelidate。如果还没有安装，可以在项目根目录运行以下命令：

   npm install element-ui vuelidate

2. 引入所需组件：在你的Vue组件文件中，引入`el-form`, `el-input`, 和`el-date-picker`组件以及`v-model`和`v-validate`指令：

   <template>
     <el-form :model="formData" ref="form" :rules="rules">
       <!-- 其他表单元素 -->
       <el-form-item label="日期选择">
         <el-date-picker v-model="formData.date" placeholder="选择日期"></el-date-picker>
       </el-form-item>
       <!-- 添加时间选择器 -->
       <el-form-item label="时间选择">
         <el-time-select v-model="formData.time" placeholder="选择时间"></el-time-select>
       </el-form-item>
     </el-form>
   </template>

3. 定义数据模型（`formData`）和校验规则（`rules`）：

   export default {
     data() {
       return {
         formData: {
           date: '',
           time: ''
         },
         rules: {
           date: { required: true, message: '请输入日期', trigger: 'blur' }, // 基本验证
           time: { type: 'date', format: 'yyyy-MM-dd HH:mm:ss', message: '请按照格式YYYY-MM-DD HH:mm:ss输入时间' } // 自定义时间格式验证
         }
       };
     },
     methods: {
       submitForm() {
         this.$refs.form.validate((valid) => {
           if (valid) {
             // 提交表单
             console.log(this.formData);
           } else {
             console.log('表单验证失败');
           }
         });
       }
     }
   };

4. 当用户填写完并点击提交按钮时，调用`validate`方法进行实时校验。如果表单通过验证，你可以继续处理表单数据。