<template>
  <div class="about">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      // 注意这里
      <el-form-item label="活动形式" prop="activity.type">
        <el-input v-model="ruleForm.activity.type"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          activity:{
            type:""
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          // 注意这里
          "activity.type": [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
        });
      resetForm(formName) {
        this.$refs[formName].resetFields();
  </script>
				
<div v-for="(item,index) in submitForm.classesWorkingTimes" :key="index">
  <el-form-item
        :prop="`classesWorkingTimes[${index}].attendanceTime`"
          :rules="[
rules: {
        payMode: [//el-form-item标签中的prop
          { required: true, message: "请选择支付方式", trigger: "change" }
        allongeQuantity: [
          { re...




    

				
el-form的表单校验，通常情况下，都是在校验第一层对象时使用
<el-form ref="form" :model="postData" :rules="rules" class="common-form" label-width="118px" size="mini">
   <el-row>
     <el-col :span="12">
       <el-form-item prop="custType" label="客户属性">
				
在我们开发过程中，有时会遇到el-form循环绑定校验，并且后台返回的是动态表单list的形式,并且动态绑定是否必填
<el-form
	ref="addForm"
	:model="submitForm"   //绑定的表单对象
	label-width="125px"
    :rules="rules"		  //绑定的校验规则
	<el-form-item v-fo...
				
Element UI 的 Form 表单组件支持动态 rules 校验功能，这意味着可以根据用户的输入或其他条件，在运行时动态地改变验证规则。这在需要复杂或灵活的验证场景下非常有用。例如：
1. **条件式验证**：你可以基于某些字段的值来确定其他字段是否应该被验证，或者验证规则应该如何变化。比如，当某个选项被选中时，才对另一个字段进行必填验证。
2. **异步验证**：通过提供一个返回 Promise 的 validate 函数，可以实现在数据请求完成后执行更复杂的验证逻辑，如检查远程服务器的数据一致性。
3. **自定义验证规则**：可以使用 Vue 自定义指令或者直接在 rules 中编写函数，根据业务需求创建自定义的验证规则。
要在 Element UI 的 Form 表单中使用动态 rules，通常会在 data 对象中定义一个 rules 属性，然后在 methods 或 computed 里定义对应的逻辑，并在 v-bind:rules 绑定到 Form 的 rules 上。
```javascript
<el-form :model="form" :rules="dynamicRules">
  <el-form-item label="姓名" prop="name">
    <el-input></el-input>
  </el-form-item>
  <!-- ... -->
</el-form>
data() {
  return {
    form: {},
    dynamicRules: {}
methods: {
  async validateAsyncField() {
    // 异步验证逻辑...
  getDynamicRule(field) {
    // 根据 field 的值动态计算规则...
                解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
                    Zww0891: 
                    方案一可以
                CSS中 设置( 单行、多行 )超出显示省略号
                    zhaoyapeng_: 
                    不设置行数，定高定宽不行吗
                uni-app中使用 async + await 实现异步请求同步化
                    weixin_41795527: 
                    5年开发也就这水平了
                Element-ui中 使用图片查看器（el-image-viewer) 预览图片
                    K_木鱼: 
                    遮罩层后面滚动问题，css也可以解决：
[code=html]
<style lang="scss">
html:has(.el-image-viewer__wrapper) {
  overflow: hidden;
</style>
[/code]
                Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
                    笑一笑8: 
                    为什么必须放在public下呢