【无标题】

    <el-form                                                                                                
            ref="formRef"                                                                                   
            style="max-width: 600px"                                                                        
            :model="dynamicValidateForm"                                                                    
            label-width="auto"                                                                              
            class="demo-dynamic"                                                                            
    >                                                                                                       
        <el-form-item                                                                                       
                v-for="(domain, index) in dynamicValidateForm.domains"                                      
                :key="domain.key"                                                                           
                :label="index + '级审核人'"                                                                     
                :prop="'domains.' + index + '.value'"                                                       
                :rules="{                                                                                   
                  required: true,                                                                           
                  message: '不能为空',                                                                          
                  trigger: 'blur',                                                                          
                }"                                                                                          
        >                                                                                                   
            <el-input v-model="domain.value"/>                                                              
            <el-button class="mt-2" @click.prevent="removeDomain(domain)">                                  
                删除                                                                                          
            </el-button>                                                                                    
        </el-form-item>                                                                                     
        <el-form-item>                                                                                      
            <el-button type="primary" @click="submitAuditRuleForm(formRef)">Submit</el-button>              
            <el-button @click="addDomain">新建审核等级</el-button>                                                
            <el-button @click="resetForm(formRef)">Reset</el-button>                                        
        </el-form-item>                                                                                     
    </el-form>                                                                                              

这段代码定义了一个使用 Element UI 组件库创建的表单，用于动态添加和管理审核等级的审核人。下面是逐行解释：

1. <el-form>

   • 定义了一个表单组件。
   • ref="formRef"：设置了一个引用（ref），以便在 Vue 实例中通过 this.$refs.formRef 访问该表单。
   • style="max-width: 600px"：设置了表单的最大宽度。
   • :model="dynamicValidateForm"：绑定表单的数据模型。
   • label-width="auto"：自动计算标签宽度。
   • class="demo-dynamic"：添加了一个类名，可用于 CSS 样式定制。

2. <el-form-item>

   • 动态生成的表单项，用于输入不同等级的审核人。
   • v-for="(domain, index) in dynamicValidateForm.domains"：遍历 dynamicValidateForm.domains 数组，为每个元素生成一个表单项。
   • :key="domain.key"：为每个表单项设置唯一的键值。
   • :label="index + '级审核人'"：设置表单项的标签，如 "0级审核人"。
   • :prop="'domains.' + index + '.value'"：设置表单项的验证属性路径。
   • :rules="{}"：设置表单项的验证规则。

3. <el-input v-model="domain.value"/>

   • 输入框组件，用于输入审核人的姓名或职位。
   • v-model="domain.value"：双向绑定输入框的值。

4. <el-button class="mt-2" @click.prevent="removeDomain(domain)">

   • 按钮组件，用于删除当前等级的审核人。
   • @click.prevent="removeDomain(domain)"：点击按钮时调用 removeDomain 方法并传入当前 domain 对象。

5. 删除

   • 按钮上的文本。

6. <el-form-item>

   • 表单底部的操作按钮。

7. <el-button type="primary" @click="submitAuditRuleForm(formRef)">

   • 提交按钮。
   • type="primary"：设置为主按钮样式。
   • @click="submitAuditRuleForm(formRef)"：点击时调用 submitAuditRuleForm 方法并传入表单引用。

8. Submit

   • 按钮上的文本。

9. <el-button @click="addDomain">

   • 添加新审核等级的按钮。
   • @click="addDomain"：点击时调用 addDomain 方法。

10. 新建审核等级

    • 按钮上的文本。

11. <el-button @click="resetForm(formRef)">

    • 重置按钮。
    • @click="resetForm(formRef)"：点击时调用 resetForm 方法并传入表单引用。

12. Reset

    • 按钮上的文本。

总结来说，这段代码实现了一个动态添加和管理审核等级及其对应审核人的表单。每个审核等级都可以添加和删除，并且有提交、新建审核等级和重置表单的功能。

// 动态添加审核人
// 使用 ref 创建一个响应式引用，初始化为空，通常用于后续操作表单元素
const formRef = ref(null)

// 创建一个响应式对象，用于动态管理表单中的域集合
const dynamicValidateForm = reactive({
domains: [
{
// 唯一标识符
key: 1,
// 域的值
value: '',
},
],
})

/**
* 移除指定的域项
* @param {Object} item - 要移除的域项
*/
const removeDomain = (item) => {
const index = dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
dynamicValidateForm.domains.splice(index, 1)
}
}

/**
* 添加一个新的域项到表单
*/
const addDomain = () => {
dynamicValidateForm.domains.push({
// 使用当前时间戳作为唯一标识符
key: Date.now(),
// 新增域的初始值为空
value: '',
})
}

/**
* 提交表单并进行验证
* @param {Object} formEl - 表单元素的引用
*/
const submitAuditRuleForm = (formEl) => {
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!')
}
})
}

/**
* 重置表单
* @param {Object} formEl - 表单元素的引用
*/
const resetForm = (formEl) => {
if (!formEl) return
formEl.resetFields()
}