Back to Details

avue-crud

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

Use this skill whenever the user wants to:
  • Build CRUD (Create, Read, Update, Delete) tables with Avue
  • Configure Avue CRUD tables
  • Implement data management interfaces
  • Add pagination, search, and sorting to tables
  • Customize table columns and operations
  • Handle table events (save, update, delete)
  • Export table data
  • Implement table selection and batch operations
  • Configure table forms for add/edit
  • Use advanced CRUD features
当用户有以下需求时，可使用此技能：
  • 使用Avue构建CRUD（创建、读取、更新、删除）表格
  • 配置Avue CRUD表格
  • 实现数据管理界面
  • 为表格添加分页、搜索和排序功能
  • 自定义表格列和操作
  • 处理表格事件（保存、更新、删除）
  • 导出表格数据
  • 实现表格选择和批量操作
  • 配置新增/编辑的表格表单
  • 使用高级CRUD功能

How to use this skill

如何使用此技能

This skill is organized to match the Avue CRUD official documentation structure (https://avuejs.com/crud/crud-doc.html). When working with Avue CRUD:
  1. Identify the topic from the user's request:
    • Getting started/快速开始 → 
      examples/getting-started/basic-usage.md
      or 
      examples/getting-started/configuration.md
    • Column configuration/列配置 → 
      examples/features/columns.md
    • CRUD operations/CRUD 操作 → 
      examples/features/crud-operations.md
    • Pagination/分页 → 
      examples/features/pagination.md
    • Search/搜索 → 
      examples/features/search.md
    • Export/导出 → 
      examples/features/export.md
    • Advanced features/高级功能 → 
      examples/advanced/
      directory
  2. Load the appropriate example file from the 
    examples/
    directory:
    Getting Started (快速开始) - 
    examples/getting-started/
    :
    • examples/getting-started/basic-usage.md
      - Basic CRUD usage
    • examples/getting-started/configuration.md
      - CRUD configuration options
    Features (功能特性) - 
    examples/features/
    :
    • examples/features/columns.md
      - Column configuration
    • examples/features/crud-operations.md
      - CRUD operations (add, edit, delete)
    • examples/features/pagination.md
      - Pagination configuration
    • examples/features/search.md
      - Search functionality
    • examples/features/sorting.md
      - Sorting configuration
    • examples/features/selection.md
      - Row selection
    • examples/features/export.md
      - Data export
    • examples/features/form-config.md
      - Form configuration in CRUD
    Advanced (高级) - 
    examples/advanced/
    :
    • examples/advanced/custom-operations.md
      - Custom operations
    • examples/advanced/column-types.md
      - Different column types
    • examples/advanced/validation.md
      - Form validation in CRUD
    • examples/advanced/events.md
      - Event handling
  3. Follow the specific instructions in that example file for syntax, structure, and best practices
    Important Notes:
    • All examples follow Avue CRUD API
    • Examples use Vue 2.x syntax
    • Each example file includes key concepts, code examples, and key points
    • Always check the example file for best practices and common patterns
    • Avue CRUD is data-driven and configuration-based
  4. Reference API documentation in the 
    api/
    directory when needed:
    • api/crud-api.md
      - CRUD component API reference
    • api/column-api.md
      - Column configuration API
    • api/option-api.md
      - Option configuration API
  5. Use templates from the 
    templates/
    directory:
    • templates/basic-crud.md
      - Basic CRUD template
    • templates/advanced-crud.md
      - Advanced CRUD template
    • templates/crud-with-api.md
      - CRUD with API integration
本技能的组织结构与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模板

Doc mapping (one-to-one with official documentation)

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

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the 
examples/
directory (see mapping above).
To use examples:
  • Identify the topic from the user's request
  • Load the appropriate example file from the mapping above
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case
To use templates:
  • Reference templates in 
    templates/
    directory for common scaffolding
  • Adapt templates to your specific needs and coding style
本技能包含与官方文档结构匹配的详细示例，所有示例均位于
examples/
目录中（见上方映射关系）。
使用示例的方法:
  • 从用户请求中确定主题
  • 根据上述映射加载对应的示例文件
  • 遵循文件中的说明、语法和最佳实践
  • 根据具体需求调整代码示例
使用模板的方法:
  • 参考
    templates/
    目录中的模板搭建通用框架
  • 根据具体需求和编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official Avue CRUD API documentation structure:
详细的API文档位于
api/
目录中，组织结构与官方Avue CRUD API文档一致:

CRUD API (
api/crud-api.md
)

CRUD API (
api/crud-api.md
)

  • Component props and APIs
  • Component events and methods
  • Component configuration
  • 组件属性与API
  • 组件事件与方法
  • 组件配置

Column API (
api/column-api.md
)

列API (
api/column-api.md
)

  • Column configuration options
  • Column types and properties
  • Column renderers and formatters
  • 列配置选项
  • 列类型与属性
  • 列渲染器与格式化器

Option API (
api/option-api.md
)

选项API (
api/option-api.md
)

  • Option configuration object
  • Table options
  • Form options
  • Button options
To use API reference:
  1. Identify the API you need help with
  2. Load the corresponding API file from the 
    api/
    directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the 
    examples/
    directory
  • 选项配置对象
  • 表格选项
  • 表单选项
  • 按钮选项
使用API参考的方法:
  1. 确定需要查询的API
  2. 从
    api/
    目录中加载对应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考关联的示例文件了解详细使用模式
  5. 所有API文件均包含指向
    examples/
    目录中相关示例文件的链接

Best Practices

最佳实践

  1. Configuration-driven: Use option object for all configuration
  2. Column definition: Define columns in option.column array
  3. Event handling: Handle @row-save, @row-update, @row-del events
  4. Data management: Manage data array and pagination object
  5. Validation: Use rules in column configuration for validation
  6. Performance: Optimize for large datasets with pagination
  7. User experience: Provide loading states and error handling
  8. API integration: Integrate with backend APIs properly
  9. Form configuration: Configure forms in column definitions
  10. Customization: Use slots and custom renderers when needed
  1. 配置驱动: 使用选项对象完成所有配置
  2. 列定义: 在option.column数组中定义列
  3. 事件处理: 处理@row-save、@row-update、@row-del事件
  4. 数据管理: 管理数据数组和分页对象
  5. 验证: 在列配置中使用rules进行验证
  6. 性能: 通过分页优化大数据集的处理
  7. 用户体验: 提供加载状态和错误处理
  8. API集成: 正确与后端API集成
  9. 表单配置: 在列定义中配置表单
  10. 自定义: 必要时使用插槽和自定义渲染器

Resources

资源

Keywords

关键词

Avue CRUD, avue-crud, table, CRUD, Create Read Update Delete, pagination, search, sort, export, column, form, validation, 表格, CRUD, 增删改查, 分页, 搜索, 排序, 导出, 列配置, 表单, 验证
Avue CRUD, avue-crud, table, CRUD, Create Read Update Delete, pagination, search, sort, export, column, form, validation, 表格, CRUD, 增删改查, 分页, 搜索, 排序, 导出, 列配置, 表单, 验证