Skip to content

c7-crud 表格组件

一个集成了搜索、表格、分页功能的完整 CRUD 组件,基于 Element Plus 的表格和分页组件进行封装。

基础用法

最简单的使用方式,包含搜索、表格和分页功能:

高级用法

包含更多自定义配置的用法:

Attributes

属性名说明类型默认值
init是否在组件挂载时自动初始化数据Booleantrue
initParam初始化时的额外参数Object{}
listFunction获取列表数据的函数Function-
rowKey行主键字段(用于多选返回主键集合)String'id'
pageTotal总数据条数Number-
pagePage当前页码Number1
pageLimit每页显示条数Number10
pageSizes每页条数选项Array[10, 20, 30, 50]
pageLayout分页器布局String'prev, pager, next, jumper'
pageBackground分页器是否有背景色Booleantrue
pageAutoScroll分页时是否自动滚动到顶部Booleantrue
pageHidden是否隐藏分页器Booleanfalse
showSearch是否显示搜索区域Booleantrue
rowsKey数据列表在响应中的路径String'rows'
totalKey总数在响应中的路径String'total'
labelWidth搜索表单标签宽度Number100
searchParam搜索参数对象Object{}

Events

事件名说明回调参数
update:showSearch搜索区域显示状态变化时触发(showSearch: boolean)
selection-change多选变化时触发(selectedKeys: string[])
update:searchParam搜索参数变化时触发(searchParam: object)
cleanParam重置搜索参数时触发-

Slots

插槽名说明
search搜索区域内容,作用域参数:{ queryParams }
operate操作按钮区域内容
default表格列定义区域

注意事项

  1. listFunction 要求:必须返回 Promise 或支持 async/await 的函数
  2. 数据格式:组件会自动从响应中提取 rowsKeytotalKey 指定的数据
  3. 搜索参数:通过 searchParam 属性传入,组件会自动合并到请求参数中
  4. 多选功能:组件内置了多选列,选中行会返回 rowKey 指定的主键值
  5. 分页处理:组件自动处理分页逻辑,包括页码和每页条数的变化