⚡

AvueCRUD组件使用指南Skill avue-crud

此技能提供Avue CRUD组件的全面指导，帮助开发者快速构建和管理数据表格界面，支持增删改查、分页、搜索、排序、导出等常见功能。适用于前端开发中需要实现数据管理场景的项目，如配置表格操作、表单处理和API集成。关键词：Avue CRUD、前端开发、表格操作、数据管理、Vue.js、增删改查、分页搜索、列配置、表单验证。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

名称: avue-crud 描述: 提供Avue CRUD组件的全面指导，包括表格操作、表单处理和数据管理。在用户询问Avue CRUD、需要实现表格CRUD操作或构建数据管理界面时使用。 许可证: 完整条款在LICENSE.txt中

使用时机

当用户想要时使用此技能：

  • 使用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/ 目录中（见上述映射）。

使用示例：

  • 从用户请求中识别主题
  • 根据上述映射加载适当的示例文件
  • 遵循该文件中的指令、语法和最佳实践
  • 将代码示例适应您的特定用例

使用模板：

  • 参考 templates/ 目录中的模板以获取常见脚手架
  • 适应模板以满足您的特定需求和编码风格

API参考

详细的API文档在 api/ 目录中可用，组织以匹配官方Avue CRUD API文档结构：

CRUD API (api/crud-api.md)

  • 组件属性和API
  • 组件事件和方法
  • 组件配置

列API (api/column-api.md)

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

选项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. 验证：在列配置中使用规则进行验证
  6. 性能：通过分页优化大数据集
  7. 用户体验：提供加载状态和错误处理
  8. API集成：正确集成后端API
  9. 表单配置：在列定义中配置表单
  10. 自定义：需要时使用插槽和自定义渲染器

资源

关键词

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