基础增删改查表格 BasicCrudTable
BasicCrudTable 组合 Toolbar、Table、Modal 与 JsonForm，内置后台页面常见的固定 CRUD 流程。
内部组件属性严格分组：table-props 只传给 Table，toolbar-props 只传给 Toolbar，modal-props 只传给 Modal，modal-form-props 只传给弹窗内的 JsonForm。
适配父级高度
Section titled “适配父级高度”父级提供明确高度后，设置 full-height 让组件撑满父容器。标题、查询工具栏和分页保持自身高度，表格填充中间的剩余空间；数据较多时通过表格默认滚动条浏览，不会继续撑高父容器。示例中的查询、新建、编辑和删除均可直接操作。
通过 toolbar-props.schemas 描述筛选项，查询条件会与分页和排序参数一起传给 fetch-table-api。
完整增删改查
Section titled “完整增删改查”配置列表、创建、更新和删除 API 后，组件会自动打开表单弹窗、校验、提交并刷新列表。
通过 v-model:table-data 控制表格数据，适合本地数据或由外部状态管理请求的场景。
通过 table__action_prepend 与 table__action_append 在默认编辑、删除按钮两侧扩展操作，插槽内可使用 Link、Popconfirm 等任意组件。
通过 v-model:modal-visible 与 v-model:modal-model 双向控制弹窗显隐和表单数据，并通过 modal__title / modal__footer 等插槽自定义弹窗内容。
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| columns | 表格列配置 | TableColumnData[] |
- |
| title | 标题区文案 | string |
- |
| table-props | 仅传给 Table 的属性，分页也在这里配置 | BasicCrudTableTableProps |
{} |
| toolbar-props | 仅传给 Toolbar 的属性 | BasicCrudTableToolbarProps |
{} |
| spin-props | 传递给列表加载遮罩 Spin 的属性 | SpinProps |
- |
| modal-props | 仅传给 Modal 的属性 | BasicCrudTableModalProps |
{} |
| modal-form-props | 仅传给弹窗 JsonForm 的属性 | BasicCrudTableModalFormProps |
{ schemas: [] } |
| full-height | 是否占满父级高度，并让表格区域填充剩余空间、内容通过表格滚动条滚动；父级需有明确高度。启用后 table-props.scroll.y 固定为 100%，其余 scroll 字段（如 x）仍按传入生效 |
boolean |
false |
| fetch-table-api | 列表请求函数 | (params) => Promise<DataResult> |
- |
| create-api / update-api | 创建、更新提交函数 | (model) => Promise<unknown> |
- |
| detail-api | 编辑前加载详情 | (row) => Promise<object> |
- |
| delete-api | 确认后删除数据 | (row) => Promise<unknown> |
- |
| before-modal-submit / before-delete | 提交或删除前拦截 | Function |
- |
| show-create / show-edit / show-delete | 是否显示默认操作 | boolean |
true |
| open-create-modal | 点击新建时是否自动打开弹窗 | boolean |
true |
| show-toolbar / show-header / show-title | 是否显示工具栏、标题区、标题文字 | boolean |
true |
| show-action-column | 是否显示内置操作列 | boolean |
true |
| action-width | 内置操作列宽度 | number |
120 |
| delete-content | 删除确认气泡文案，支持按行生成 | string | ((row) => string | Promise<string>) |
- |
| delete-name-key | 删除文案中引用的名称字段，如 name |
string |
- |
| fetch-table-on-mounted | 挂载时是否自动请求列表 | boolean |
true |
| fetch-exclude-empty-values | 请求时是否剔除空字符串 / null / undefined 参数 | boolean |
false |
| value-transformer | 编辑详情回填时对详情数据的转换 | (detail) => model |
- |
| table-data-transformer | 列表响应转换，支持异步 | (res) => DataResult | Promise<DataResult> |
- |
Models
Section titled “Models”| 模型名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| loading | 列表加载状态 | boolean |
false |
| toolbar-model | 查询条件 | Record<string, unknown> |
{} |
| table-data | 表格数据 | TableData[] |
[] |
| modal-model | 创建/编辑表单数据 | Record<string, unknown> |
{} |
| modal-visible | 创建/编辑弹窗显隐 | boolean |
false |
Events
Section titled “Events”| 事件名 | 描述 | 参数 |
|---|---|---|
| create / edit / delete | 对应操作发生时触发 | row, context |
| search / reset | 查询或重置 | params / - |
| table-fetched | 列表请求并解析完成 | rows, result |
| modal-success / modal-close | 弹窗提交成功或关闭 | result, context / - |
| error | 请求、详情、提交或删除失败 | error |
| 插槽名 | 描述 | 参数 |
|---|---|---|
| header__title / header__extra | 标题区内容 | { title } / - |
| toolbar__default | 自定义筛选内容 | - |
| toolbar__action_prepend / toolbar__action_append | 查询操作区扩展 | - |
| toolbar__插槽名 | 透传到 Toolbar | 与 Toolbar 一致 |
| table__action_prepend / table__action_append | 默认行操作两侧内容 | Table 单元格上下文 |
| table__插槽名 | 透传到 Table | 与 Table 一致 |
| modal__title / modal__footer | 自定义弹窗标题或页脚 | { type, row, model } |
| modal__表单插槽名 | 透传到弹窗 JsonForm | JsonForm 参数与 CRUD 上下文 |
Methods
Section titled “Methods”通过 ref 调用组件暴露的方法：
| 方法名 | 描述 | 参数 |
|---|---|---|
| fetchTableData | 重新请求列表 | - |
| search | 触发查询（重置到第 1 页） | - |
| reset | 重置工具栏筛选 + 分页/排序并刷新（全量重置） | - |
| resetToolbar | 仅重置工具栏筛选项，不刷新列表 | - |
| resetTable | 仅重置分页/排序并刷新，不动工具栏 | - |
| create | 触发新建（默认打开弹窗） | - |
| edit | 触发编辑某行 | (row, context?) |
| delete | 直接删除某行（不再弹确认，由调用方自行确认） | (row, context?) |
| tableData | 当前表格数据（只读） | - |
| fetchData | 最近一次列表请求的原始响应（只读） | - |
| isCreate | 弹窗是否为新建态（只读） | - |
| modalRef | 内置弹窗实例引用 | - |