SimpleCrudTemplate CRUD 页面模板

标准 CRUD 页面模板，直接封装 AiCrudPage 组件。接收一个 crudProps 配置对象并透传给 AiCrudPage，适合平坦型数据的增删改查场景。

• 基础用法
• Props
• Exposed Methods
• 与其他模板的区别
• 注意事项

基础用法

<template>
  <SimpleCrudTemplate :crud-props="crudProps" ref="crudRef" />
</template>

<script setup>
import SimpleCrudTemplate from '@/components/page-templates/SimpleCrudTemplate.vue'

const crudProps = {
  api: '/api/user',
  columns: [
    { prop: 'username', label: '用户名', width: 120 },
    { prop: 'status', label: '状态', width: 80 },
  ],
  searchSchema: [
    { field: 'username', label: '用户名', type: 'input' },
  ],
  editSchema: [
    { field: 'username', label: '用户名', type: 'input', required: true },
  ],
}
</script>

Props

属性	类型	必填	说明
crudProps	Object	✅	完整的 AiCrudPage 配置对象，包含 api、columns、searchSchema、editSchema 等所有 AiCrudPage 支持的 Props

Exposed Methods

通过 ref 获取模板实例后，可调用内部 AiCrudPage 的对应方法：

方法	说明
showAdd(...args)	打开新增表单
showDetail(...args)	打开详情弹窗
refresh(...args)	刷新列表数据

与其他模板的区别

模板	适用场景
SimpleCrudTemplate	标准单表 CRUD
MasterDetailCrudTemplate	主子表 CRUD
TreeCrudTemplate	左树右表 / 树形表 CRUD

注意事项

• 本质是 AiCrudPage 的薄封装，所有配置与 AiCrudPage 完全一致
• 建议参考 AiCrudPage 文档 了解完整的配置选项