不定表单

47 阅读1分钟

<a-form :form="formRef" layout="vertical" @submit="handleSubmit" scrollToFirstError> <template #fields>

项目 {{ index + 1 }} <a-icon type="close-circle" class="remove-btn" @click="removeItem(index)" v-if="(formRef.getFieldValue('items') || []).length > 1" />

        <a-form-item
          :name="['items', index, 'name']"
          :rules="[
            { required: true, message: '请输入名称' },
            { whitespace: true, message: '名称不能为空' }
          ]"
          label="名称">
          <a-input placeholder="请输入名称" />
        </a-form-item>
        
        <a-form-item
          :name="['items', index, 'desc']"
          :rules="[
            { required: true, message: '请输入描述' },
            { whitespace: true, message: '描述不能为空' }
          ]"
          label="描述">
          <a-textarea rows="3" placeholder="请输入描述" />
        </a-form-item>
      </div>
    </template>
    
    <!-- 添加按钮 -->
    <a-form-item>
      <a-button
        type="dashed"
        class="w-full add-btn"
        @click="addItem"
        icon="plus">
        添加项目
      </a-button>
    </a-form-item>
    
    <!-- 提交按钮 -->
    <a-form-item>
      <a-button type="primary" html-type="submit">
        提交表单
      </a-button>
    </a-form-item>
  </a-form>
  
    const formRef = ref(null)
    
    // 提交结果
    const submitResult = ref(null)
    
    // 初始化表单
    const initForm = () => {
      // 设置初始值,包含一个空对象
      formRef.value.setFieldsValue({
        items: [{ name: '', desc: '' }]
      })
    }
    
     const addItem = () => {
      const items = formRef.value.getFieldValue('items') || []
      formRef.value.setFieldsValue({
        items: [...items, { name: '', desc: '' }]
      })
    }
    
     const removeItem = (index) => {
      const items = formRef.value.getFieldValue('items') || []
      if (items.length > 1) {
        items.splice(index, 1)
        formRef.value.setFieldsValue({ items })
      } else {
        message.warning('至少保留一个项目')
      }
    }
    
    const handleSubmit = (e) => {           e.preventDefault()           formRef.value.validateFields().then(values => {             // 过滤掉空项             const validItems = values.items.filter(item => item.name.trim() && item.desc.trim())             submitResult.value = {               items: validItems             }             message.success('表单提交成功')           }).catch(errorInfo => {             console.log('验证失败:', errorInfo)             message.error('请检查并填写所有必填字段')           })         }