avue-crud

何时使用此技能

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

• 使用 Avue 构建 CRUD 表格（创建、读取、更新、删除）
• 配置表格列、分页、搜索和排序
• 处理行事件（@row-save、@row-update、@row-del）
• 导出表格数据或实现批量操作
• 在 CRUD 表格对话框中添加表单验证

如何使用此技能

工作流

1. 定义 option 对象 - 配置列、表格行为和表单规则
2. 绑定数据和分页 - 将数据数组和分页连接到组件
3. 处理事件 - 实现保存、更新和删除事件处理程序
4. 加载详细示例 - 每项功能都在 examples/ 中有对应文件

快速入门示例：带分页的 CRUD 表格

<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>

功能参考

功能	文件
列配置	examples/features/columns.md
CRUD 操作	examples/features/crud-operations.md
分页	examples/features/pagination.md
搜索	examples/features/search.md
导出	examples/features/export.md
表单验证	examples/advanced/validation.md

API 参考

• api/crud-api.md - 组件属性、事件、方法
• api/column-api.md - 列类型、渲染器、格式化器
• api/option-api.md - 表格、表单和按钮选项

最佳实践

1. 由配置驱动 - 在 option 对象中定义所有表格行为，而不是在模板标记中定义
2. 在事件处理程序中调用 done() - 保存或更新后，始终调用 done() 关闭对话框
3. 使用列类型 - 设置 type: 'select'、type: 'date' 等，以自动生成表单控件
4. 在服务端分页 - 对于大型数据集，使用带分页参数的 @on-load
5. 添加搜索列 - 在列上设置 search: true 以启用搜索栏

资源

• 官方文档：https://avuejs.com/crud/crud-doc.html

关键词

Avue CRUD、avue-crud、表格、CRUD、增删改查、分页、搜索、列、表单、表格、分页、数据管理