Full-stack-skills avue-crud

Builds configuration-driven CRUD tables with the Avue framework, including column definition, pagination, search, sorting, row operations (add/edit/delete), data export, and form validation. Use when the user needs to create data management interfaces with Avue CRUD tables in Vue 2 applications.

install

source · Clone the upstream repo

git clone https://github.com/partme-ai/full-stack-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/partme-ai/full-stack-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/avue-skills/avue-crud" ~/.claude/skills/partme-ai-full-stack-skills-avue-crud && rm -rf "$T"

manifest: skills/avue-skills/avue-crud/SKILL.md

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

Define the option object - Configure columns, table behavior, and form rules
Bind data and page - Connect data array and pagination to the component
Handle events - Implement save, update, and delete event handlers
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

Configuration-driven - Define all table behavior in the
```
option
```
object, not in template markup
Call done() in event handlers - Always call
```
done()
```
after save/update to close the dialog
Use column types - Set
```
type: 'select'
```
,
```
type: 'date'
```
, etc. for automatic form controls
Paginate server-side - Use
```
@on-load
```
with page params for large datasets
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