avue-form

name: avue-form description: "Builds configuration-driven dynamic forms with Avue Form, including field types (input, select, date, upload), validation rules, form groups, tabbed layouts, and event handling. Use when the user needs to create forms with Avue in Vue applications, implement form validation, or build dynamic multi-step forms." license: Complete terms in LICENSE.txt

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

<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

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