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——表格级插槽渲染函数配置。
diagnosticsboolean | undefinedtrue—输出无效 slot/renderer 配置的开发期警告。
renderers{}—当前表格局部 renderer,优先于 registry。
rendererRegistry——当前表格使用的 renderer registry。
columnOrder[]—受控或初始列顺序,未列出的列按源顺序追加。
columnVisibility{}—受控或初始列显隐状态,优先于 column.visible。
columnWidths{}—受控列宽,按 column.id 或 field 映射到像素值。
pane——内置列配置面板,可调整列宽、顺序和显隐。
columnConfigfalse——
emptyTextstring | undefined"暂无数据"——
currentRowIndexnumber | undefined-1——
query———
paramsRecord<string, unknown> | undefined{}——
cacheKey———
enabledboolean | undefinedtrue——
staleTimenumber | undefined———
pagination———
totalnumber | undefined——非请求模式下的分页总数,默认为 data.length。
resetPageOnParamsChangeboolean | undefinedtrue——
currentPagenumber | undefined1——
pageSizenumber | undefined10——
widthstring | number | undefined800—表格宽度。数字表示像素,字符串按 CSS 宽度解析并响应容器变化。
heightnumber | undefined320——
rowHeightnumber | undefined44——
headerHeightnumber | undefined40——
defaultColumnWidthnumber | undefined160——
minColumnWidthnumber | undefined——列设置允许的最小宽度,未设置时不限制源列宽。
maxColumnWidthnumber | undefined——列设置允许的最大宽度,未设置时不限制源列宽。
columnWidthStepnumber | undefined——列设置输入框的步进值。
rowKeystring | 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—
diagnosticsboolean输出无效 slot/renderer 配置的开发期警告。
renderers当前表格局部 renderer,优先于 registry。
columnOrder受控或初始列顺序,未列出的列按源顺序追加。
columnVisibility受控或初始列显隐状态,优先于 column.visible。
columnWidths受控列宽,按 column.id 或 field 映射到像素值。
pane内置列配置面板,可调整列宽、顺序和显隐。
columnConfig—
emptyTextstring—
currentRowIndexnumber—
paramsRecord<string, unknown>—
enabledboolean—
pagination—
resetPageOnParamsChangeboolean—
widthstring | number表格宽度。数字表示像素,字符串按 CSS 宽度解析并响应容器变化。
heightnumber—
rowHeightnumber—
headerHeightnumber—
defaultColumnWidthnumber—
rowKeystring—
getRowIdStable row identity for row/cell mode overrides.
slots表格级插槽渲染函数配置。
rendererRegistry当前表格使用的 renderer registry。
query—
cacheKey—
staleTimenumber | undefined—
totalnumber | undefined非请求模式下的分页总数,默认为 data.length。
currentPagenumber | undefined—
pageSizenumber | undefined—
minColumnWidthnumber | undefined列设置允许的最小宽度,未设置时不限制源列宽。
maxColumnWidthnumber | undefined列设置允许的最大宽度,未设置时不限制源列宽。
columnWidthStepnumber | 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—
modeEffective 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—

组件贡献者 ​