avue-crud

适用场景

当用户希望执行以下操作时，请使用此技能：

• 使用 Avue 构建 CRUD（创建、读取、更新、删除）表格
• 配置 Avue CRUD 表格
• 实现数据管理界面
• 为表格添加分页、搜索和排序
• 自定义表格列和操作
• 处理表格事件（保存、更新、删除）
• 导出表格数据
• 实现表格选择和批量操作
• 配置用于新增／编辑的表单
• 使用高级 CRUD 功能

使用方法

此技能按照 Avue CRUD 官方文档的结构组织（https://avuejs.com/crud/crud-doc.html）。使用 Avue CRUD 时：

1. 根据用户请求确定主题：

   • 入门／快速开始 → examples/getting-started/basic-usage.md 或 examples/getting-started/configuration.md
   • 列配置 → examples/features/columns.md
   • CRUD 操作 → examples/features/crud-operations.md
   • 分页 → examples/features/pagination.md
   • 搜索 → examples/features/search.md
   • 导出 → examples/features/export.md
   • 高级功能 → examples/advanced/ 目录

2. 从 examples/ 目录加载相应的示例文件：

   入门（快速开始）- examples/getting-started/：

   • examples/getting-started/basic-usage.md - 基本 CRUD 用法
   • examples/getting-started/configuration.md - CRUD 配置选项

   功能特性 - examples/features/：

   • examples/features/columns.md - 列配置
   • examples/features/crud-operations.md - CRUD 操作（新增、编辑、删除）
   • examples/features/pagination.md - 分页配置
   • examples/features/search.md - 搜索功能
   • examples/features/sorting.md - 排序配置
   • examples/features/selection.md - 行选择
   • examples/features/export.md - 数据导出
   • examples/features/form-config.md - CRUD 中的表单配置

   高级功能 - examples/advanced/：

   • examples/advanced/custom-operations.md - 自定义操作
   • examples/advanced/column-types.md - 不同的列类型
   • examples/advanced/validation.md - CRUD 中的表单验证
   • examples/advanced/events.md - 事件处理

3. 按照该示例文件中的具体说明处理语法、结构和最佳实践

   重要说明：

   • 所有示例均遵循 Avue CRUD API
   • 示例使用 Vue 2.x 语法
   • 每个示例文件都包含关键概念、代码示例和要点
   • 务必查看示例文件，了解最佳实践和常见模式
   • Avue CRUD 采用数据驱动和配置式设计

4. 必要时参考 api/ 目录中的 API 文档：

   • api/crud-api.md - CRUD 组件 API 参考
   • api/column-api.md - 列配置 API
   • api/option-api.md - 选项配置 API

5. 使用 templates/ 目录中的模板：

   • templates/basic-crud.md - 基本 CRUD 模板
   • templates/advanced-crud.md - 高级 CRUD 模板
   • templates/crud-with-api.md - 集成 API 的 CRUD

文档映射（一一对应官方文档）

• examples/ → https://avuejs.com/crud/crud-doc.html

示例和模板

此技能包含详细示例，其组织结构与官方文档一致。所有示例均位于 examples/ 目录中（参见上方映射）。

使用示例：

• 根据用户请求确定主题
• 从上方映射中加载相应的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据具体用例调整代码示例

使用模板：

• 参考 templates/ 目录中的模板，了解常见脚手架
• 根据具体需求和编码风格调整模板

API 参考

api/ 目录中提供了详细的 API 文档，其组织结构与 Avue CRUD 官方 API 文档一致：

CRUD API (api/crud-api.md)

• 组件 props 和 API
• 组件事件和方法
• 组件配置

Column API (api/column-api.md)

• 列配置选项
• 列类型和属性
• 列渲染器和格式化器

Option API (api/option-api.md)

• 选项配置对象
• 表格选项
• 表单选项
• 按钮选项

使用 API 参考：

1. 确定你需要了解的 API
2. 从 api/ 目录加载对应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接中的示例文件，了解详细用法
5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 配置驱动：所有配置都使用选项对象
2. 列定义：在 option.column 数组中定义列
3. 事件处理：处理 @row-save、@row-update、@row-del 事件
4. 数据管理：管理数据数组和分页对象
5. 验证：在列配置中使用 rules 进行验证
6. 性能：使用分页优化大型数据集的处理
7. 用户体验：提供加载状态和错误处理
8. API 集成：正确集成后端 API
9. 表单配置：在列定义中配置表单
10. 自定义：按需使用插槽和自定义渲染器

资源

• 官方网站：https://avuejs.com/
• CRUD 文档：https://avuejs.com/crud/crud-doc.html
• GitHub 仓库：https://github.com/avue/avue

关键词

Avue CRUD、avue-crud、表格、CRUD、创建、读取、更新、删除、分页、搜索、排序、导出、列、表单、验证、表格、CRUD、增删改查、分页、搜索、排序、导出、列配置、表单、验证