ConfigTable
基于 Element Plus ElTableV2 的高性能虚拟滚动配置式表格,支持远程请求、分页、自定义渲染与插槽。
基础用法
Renderer
列内容的默认优先级为:列内联渲染函数或具名 Slot、命名 renderer、formatter、原始字段值。edit 模式会先尝试 slots.edit,未命中时回退到这条默认渲染链。column.id 是列设置和单元格模式使用的稳定标识,未提供时使用 field。
列配置面板
pane 开启内置列配置面板。面板支持拖拽调整顺序、切换列的显示状态和修改列宽;pane.width 控制面板宽度,pane.draggable 可关闭拖拽。默认由组件内部维护列设置;只有需要持久化或外部控制时,才传入 columnOrder、columnVisibility、columnWidths 或对应的 v-model。旧的 columnConfig 仍作为兼容别名保留。
远程请求 + 分页
编辑模式
mode prop 只控制整个表格,默认值为 default。组件实例 API 支持 setMode、setRowMode、setCellMode,以及对应的单项清理;clearAllCellModes、clearAllRowModes、clearAllModes 分别清理单元格、行、全部 override。getRowMode 和 getCellMode 可读取有效模式。模式优先级为:单元格、行、整表 API、mode prop、default。
setRowMode 和 setCellMode 既可传稳定 ID,也可传 selector。行 selector 接收 { row, rowIndex, rowId },单元格 selector 还会收到 { column, columnIndex, columnId };所有匹配项都会切换为指定模式。selector 仅在调用 API 时扫描一次当前已加载数据,远程分页时即当前页;命中结果仍按稳定的行列 ID 保存,因此后续数据重排不会导致模式漂移。
下面的示例把三种 API 范围放在同一张表里:表格按钮调用 setMode,行按钮调用 setRowMode,单元格按钮调用 setCellMode。mode prop 的开关只改变整张表,点击“清除 API 模式”后即可看到它的效果。
有效的模式 API 变更会触发 modeChange;单项事件包含变更前后有效模式,批量事件包含清理数量。事件只用于状态观察,不会写回 mode prop。组件不提供内置编辑触发器,也不处理保存/取消、校验或行数据更新,这些行为由使用方实现。缺少 edit 插槽时,单元格保持原有渲染结果。
自定义单元格插槽
API
Props
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| columns | [] | — | — | |
| data | [] | — | — | |
| mode | — | — | Table-wide rendering mode. Row/cell modes are controlled through the exposed API. | |
| getRowId | — | — | Stable row identity for row/cell mode overrides. | |
| tableProps | {} | — | — | |
| slots | — | — | 表格级插槽渲染函数配置。 | |
| diagnostics | boolean | undefined | true | — | 输出无效 slot/renderer 配置的开发期警告。 |
| renderers | {} | — | 当前表格局部 renderer,优先于 registry。 | |
| rendererRegistry | — | — | 当前表格使用的 renderer registry。 | |
| columnOrder | [] | — | 受控或初始列顺序,未列出的列按源顺序追加。 | |
| columnVisibility | {} | — | 受控或初始列显隐状态,优先于 column.visible。 | |
| columnWidths | {} | — | 受控列宽,按 column.id 或 field 映射到像素值。 | |
| pane | — | — | 内置列配置面板,可调整列宽、顺序和显隐。 | |
| columnConfig | false | — | — | |
| emptyText | string | undefined | "暂无数据" | — | — |
| currentRowIndex | number | undefined | -1 | — | — |
| query | — | — | — | |
| params | Record<string, unknown> | undefined | {} | — | — |
| cacheKey | — | — | — | |
| enabled | boolean | undefined | true | — | — |
| staleTime | number | undefined | — | — | — |
| pagination | — | — | — | |
| total | number | undefined | — | — | 非请求模式下的分页总数,默认为 data.length。 |
| resetPageOnParamsChange | boolean | undefined | true | — | — |
| currentPage | number | undefined | 1 | — | — |
| pageSize | number | undefined | 10 | — | — |
| width | string | number | undefined | 800 | — | 表格宽度。数字表示像素,字符串按 CSS 宽度解析并响应容器变化。 |
| height | number | undefined | 320 | — | — |
| rowHeight | number | undefined | 44 | — | — |
| headerHeight | number | undefined | 40 | — | — |
| defaultColumnWidth | number | undefined | 160 | — | — |
| minColumnWidth | number | undefined | — | — | 列设置允许的最小宽度,未设置时不限制源列宽。 |
| maxColumnWidth | number | undefined | — | — | 列设置允许的最大宽度,未设置时不限制源列宽。 |
| columnWidthStep | number | undefined | — | — | 列设置输入框的步进值。 |
| rowKey | string | undefined | "__mx_config_table_row_key" | — | — |
Emits
| 名称 | 参数 | 说明 |
|---|---|---|
| update:currentPage | [value: number] | — |
| update:pageSize | [value: number] | — |
| cellClick | — | |
| cellDblClick | — | |
| loaded | — | |
| error | — | |
| pageChange | — | |
| modeChange | — | |
| update:columnOrder | — | |
| update:columnVisibility | — | |
| update:columnWidths | — | |
| columnSettingChange | — |
Slots
| 名称 | 作用域 | 说明 |
|---|---|---|
| empty | — | |
| [dynamic] | 按列配置 slots.default / slots.header 动态声明的单元格或表头插槽,作用域参数为该列的行/列/值上下文。 |
Expose
| 名称 | 类型 | 说明 |
|---|---|---|
| $slots | — | |
| columns | — | |
| data | — | |
| tableProps | — | |
| diagnostics | boolean | 输出无效 slot/renderer 配置的开发期警告。 |
| renderers | 当前表格局部 renderer,优先于 registry。 | |
| columnOrder | 受控或初始列顺序,未列出的列按源顺序追加。 | |
| columnVisibility | 受控或初始列显隐状态,优先于 column.visible。 | |
| columnWidths | 受控列宽,按 column.id 或 field 映射到像素值。 | |
| pane | 内置列配置面板,可调整列宽、顺序和显隐。 | |
| columnConfig | — | |
| emptyText | string | — |
| currentRowIndex | number | — |
| params | Record<string, unknown> | — |
| enabled | boolean | — |
| pagination | — | |
| resetPageOnParamsChange | boolean | — |
| width | string | number | 表格宽度。数字表示像素,字符串按 CSS 宽度解析并响应容器变化。 |
| height | number | — |
| rowHeight | number | — |
| headerHeight | number | — |
| defaultColumnWidth | number | — |
| rowKey | string | — |
| getRowId | Stable row identity for row/cell mode overrides. | |
| slots | 表格级插槽渲染函数配置。 | |
| rendererRegistry | 当前表格使用的 renderer registry。 | |
| query | — | |
| cacheKey | — | |
| staleTime | number | undefined | — |
| total | number | undefined | 非请求模式下的分页总数,默认为 data.length。 |
| currentPage | number | undefined | — |
| pageSize | number | undefined | — |
| minColumnWidth | number | undefined | 列设置允许的最小宽度,未设置时不限制源列宽。 |
| maxColumnWidth | number | undefined | 列设置允许的最大宽度,未设置时不限制源列宽。 |
| columnWidthStep | number | undefined | 列设置输入框的步进值。 |
| onUpdate:currentPage | ((value: number) => any) | undefined | — |
| onUpdate:pageSize | ((value: number) => any) | undefined | — |
| onCellClick | — | |
| onCellDblClick | — | |
| onLoaded | — | |
| onError | — | |
| onPageChange | — | |
| onModeChange | — | |
| onUpdate:columnOrder | — | |
| onUpdate:columnVisibility | — | |
| onUpdate:columnWidths | — | |
| onColumnSettingChange | — | |
| mode | Effective table-wide mode after resolving the API override and mode prop. | |
| setMode | — | |
| clearMode | () => void | — |
| setRowMode | — | |
| clearRowMode | — | |
| setCellMode | — | |
| clearCellMode | — | |
| clearAllRowModes | () => void | — |
| clearAllCellModes | () => void | — |
| clearAllModes | () => void | — |
| getRowMode | — | |
| getCellMode | — |