--- title: ProTable 表格组件 --- # ProTable 表格组件 ProTable 是基于 ProForm 和 Element Plus Table 的高级表格组件，支持搜索表单、分页、多选、排序、筛选等功能。 ## 说明 ProTable 集成了搜索表单（基于 ProForm）、数据表格、分页等功能，通过 `columns` 配置自动生成搜索表单和表格列。支持多级表头、自定义列渲染、行选择、排序、筛选等高级功能。 ## API ### Props | 参数 | 说明 | 类型 | 默认值 | | ---------------- | ---------------------------------- | --------------------------------- | ------------------------------------------------------------------ | | fixedTable | 是否固定表格高度（填充剩余空间） | `Boolean` | `false` | | showHeader | 是否显示表格头部（搜索表单） | `Boolean` | `false` | | showPagination | 是否显示分页器 | `Boolean` | `false` | | showOperations | 是否显示操作栏 | `Boolean` | `false` | | showToolbar | 是否显示 ToolBar | `Boolean` | `true` | | dataSource | 表格数据 | `Array` | `[]` | | columns | 列配置 | `Array` | `[]` | | currentPage | 当前页码 | `Number` | `1` | | pageSize | 每页显示条数 | `Number` | `10` | | pageSizes | 每页显示条数选项 | `Array` | `[10, 20, 50, 100]` | | total | 总条数 | `Number` | `0` | | loading | 加载状态 | `Boolean` | `false` | | searchLabelWidth | 搜索表单标签宽度 | `String \| Number` | `'120px'` | | searchCols | 搜索表单列数 | `Number \| Object` | `4` | | rowSelection | 行选择配置 | `Boolean \| Object` | `false` | | height | 表格高度 | `String \| Number` | - | | searchTitle | 搜索表单标题 | `String` | - | | tableTitle | 表格标题 | `String` | - | | editable | 是否可编辑 | `Boolean` | `false` | | readonly | 是否只读（当 editable 为 true 时） | `Boolean` | `false` | | toolbar | ToolBar 配置 | `Object \| Boolean` | - | | toolbarOptions | ToolBar 选项 | `Object` | `{ reload: true, density: true, setting: true, fullScreen: true }` | | tableSize | 表格尺寸 | `'large' \| 'default' \| 'small'` | `'default'` | ### Column 配置 | 参数 | 说明 | 类型 | 默认值 | | --------------------- | ----------------------------------------------------- | ------------------------------- | -------- | | prop | 字段名 | `String` | - | | label | 标签文本 | `String` | - | | width | 列宽度 | `Number \| String` | - | | minWidth | 最小宽度 | `Number \| String` | - | | fixed | 固定列 | `'left' \| 'right'` | - | | align | 对齐方式 | `'left' \| 'center' \| 'right'` | - | | hideInSearch | 是否在搜索表单中隐藏 | `Boolean` | `true` | | hideInTable | 是否在表格中隐藏 | `Boolean` | `false` | | valueType | 字段类型（用于搜索表单） | `String` | `'text'` | | valueEnum | 映射值的类型 | `Object \| Map` | - | | fieldProps | 字段属性（用于搜索表单） | `Object` | `{}` | | colSpan | 搜索表单列跨度 | `Number` | - | | slots | 插槽配置 | `Object` | - | | sorter | 排序配置 | `Boolean \| Function` | - | | filters | 筛选配置 | `Array` | - | | filterMethod | 筛选方法 | `Function` | - | | cellBackgroundColor | 单元格背景色函数 | `Function` | - | | columnBackgroundColor | 整列背景色 | `Boolean` | `false` | | statusField | 状态字段名 | `String` | - | | statusValue | 状态值（当 statusField 的值等于此值时显示错误背景色） | `String` | - | | children | 子列（用于多级表头） | `Array` | - | | collapsible | 操作列是否可以收缩展开 | `Boolean` | `false` | | defaultCollapsed | 操作列默认是否收缩 | `Boolean` | `false` | | maxVisibleActions | 最多显示按钮数量 | `Number` | - | ### Events | 事件名 | 说明 | 参数 | | ---------------- | -------------------------- | -------------------- | | size-change | 每页显示条数变化时触发 | `(size: number)` | | current-change | 当前页变化时触发 | `(page: number)` | | search | 搜索时触发 | `(values: object)` | | reset | 重置时触发 | - | | selection-change | 行选择变化时触发 | `(selection: Array)` | | add | 添加行时触发（可编辑表格） | `(row: object)` | | delete | 删除行时触发（可编辑表格） | `(row: object)` | | update | 更新行时触发（可编辑表格） | `(row: object)` | ### Slots | 插槽名 | 说明 | 参数 | | ---------------- | -------------- | --------------------------------------------------- | | operations | 操作栏内容 | - | | paginationBefore | 分页器前的内容 | - | | `{prop}` | 列自定义内容 | `{ row: object, column: Column, $index: number }` | | batchOperations | 批量操作内容 | `{ selectedRows: Array, clearSelection: Function }` | ## 示例 :::example pro-table/basic ::: ## 可编辑表格 :::example pro-table/editable ::: ## 多级表头 :::example pro-table/multi-header ::: ## 非固定表格 :::example pro-table/nofixed :::