teachingai/avue-crud

When to use this skill

Use this skill whenever the user wants to:

• Build CRUD tables with Avue (create, read, update, delete)
• Configure table columns, pagination, search, and sorting
• Handle row events (@row-save, @row-update, @row-del)
• Export table data or implement batch operations
• Add form validation inside CRUD table dialogs

How to use this skill

Workflow

1. Define the option object - Configure columns, table behavior, and form rules
2. Bind data and page - Connect data array and pagination to the component
3. Handle events - Implement save, update, and delete event handlers
4. Load detailed examples - Each feature has a file in examples/

Quick-Start Example: CRUD Table with Pagination

<template>
  <avue-crud
    :option="option"
    :data="data"
    :page.sync="page"
    @row-save="handleSave"
    @row-update="handleUpdate"
    @row-del="handleDel"
    @on-load="loadData"
  />
</template>

<script>
export default {
  data() {
    return {
      data: [],
      page: { currentPage: 1, pageSize: 10, total: 0 },
      option: {
        border: true,
        index: true,
        selection: true,
        column: [
          { label: 'Name', prop: 'name', search: true, rules: [{ required: true, message: 'Name is required' }] },
          { label: 'Email', prop: 'email', search: true },
          { label: 'Status', prop: 'status', type: 'select', dicData: [
            { label: 'Active', value: 1 }, { label: 'Inactive', value: 0 }
          ]}
        ]
      }
    }
  },
  methods: {
    loadData() {
      // Fetch data from API using this.page.currentPage and this.page.pageSize
    },
    handleSave(row, done) { /* POST to API, then call done() */ done() },
    handleUpdate(row, index, done) { /* PUT to API, then call done() */ done() },
    handleDel(row, index) { /* DELETE from API, then remove from this.data */ }
  }
}
</script>

Feature Reference

| Feature | File | |---------|------| | Column config | examples/features/columns.md | | CRUD operations | examples/features/crud-operations.md | | Pagination | examples/features/pagination.md | | Search | examples/features/search.md | | Export | examples/features/export.md | | Form validation | examples/advanced/validation.md |

API Reference

• api/crud-api.md - Component props, events, methods
• api/column-api.md - Column types, renderers, formatters
• api/option-api.md - Table, form, and button options

Best Practices

1. Configuration-driven - Define all table behavior in the option object, not in template markup
2. Call done() in event handlers - Always call done() after save/update to close the dialog
3. Use column types - Set type: 'select', type: 'date', etc. for automatic form controls
4. Paginate server-side - Use @on-load with page params for large datasets
5. Add search columns - Set search: true on columns to enable the search bar

Resources

• Official Docs: https://avuejs.com/crud/crud-doc.html

Keywords

Avue CRUD, avue-crud, table, CRUD, 增删改查, pagination, search, column, form, 表格, 分页, data management