avue-form

## When to use this skill

Use this skill whenever the user wants to:
- Create configuration-driven forms with Avue Form
- Define form fields with types (input, select, date, checkbox, upload, etc.)
- Implement form validation rules
- Build dynamic forms, form groups, or tabbed form layouts
- Handle form submit, reset, and field change events

## How to use this skill

### Workflow

1. **Install** - `npm install @avue/form` and register with `Vue.use(Avue)`
2. **Define option** - Configure columns with labels, props, types, and rules
3. **Bind v-model** - Two-way bind the form data object
4. **Handle events** - Listen for @submit, @reset-change, and field-level events

### Quick-Start Example: Form with Validation

```vue
<template>
  <avue-form :option="option" v-model="form" @submit="handleSubmit" @reset-change="handleReset">
  </avue-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      option: {
        submitText: 'Save',
        column: [
          {
            label: 'Name',
            prop: 'name',
            type: 'input',
            span: 12,
            rules: [{ required: true, message: 'Name is required', trigger: 'blur' }]
          },
          {
            label: 'Role',
            prop: 'role',
            type: 'select',
            span: 12,
            dicData: [
              { label: 'Admin', value: 'admin' },
              { label: 'User', value: 'user' }
            ]
          },
          {
            label: 'Start Date',
            prop: 'startDate',
            type: 'date',
            format: 'yyyy-MM-dd'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(form, done) {
      console.log('Form data:', form)
      // Call API, then done() to re-enable button
      done()
    },
    handleReset() {
      console.log('Form reset')
    }
  }
}
</script>
```

### Feature Reference

| Feature | File |
|---------|------|
| Dynamic form | `examples/features/dynamic-form.md` |
| Form layout | `examples/features/form-layout.md` |
| Validation rules | `examples/features/form-rules.md` |
| Form groups | `examples/features/form-group.md` |
| Tabbed forms | `examples/features/form-tabs.md` |
| Custom components | `examples/features/custom-components.md` |

### API Reference

- `api/form-api.md` - Component props, events, and slots
- `api/columns-api.md` - Column types and properties
- `api/options-api.md` - Form option configuration

## Best Practices

1. **Use column types** - Set `type: 'select'`, `type: 'date'`, `type: 'upload'` for automatic controls
2. **Call done() after submit** - Always call `done()` in the submit handler to re-enable the button
3. **Use span for layout** - Set `span: 12` for half-width fields (24 = full width grid)
4. **Group related fields** - Use `group` option to organize complex forms into sections
5. **Validate on blur** - Set `trigger: 'blur'` for a less intrusive validation experience

## Resources

- **Official Docs**: https://avuejs.com/form/form-doc.html

## Keywords

Avue Form, avue-form, Vue form, dynamic form, 表单组件, 表单验证, form validation, form configuration, form columns, form rules