FxProTable 表格

基于 @fx/components 的 FxTable 封装的配置式业务表格，通过 columns 配置列，支持插槽自定义内容与表头、隐藏列、多选/序号/展开行。

FxProTable 属于 @fx/pro（业务级组件，UI 框架无关）；底层渲染基于 @fx/components 的 FxTable / FxTableColumn，不再直接依赖 Element Plus。

引入方式

import { FxProTable } from "@fx/pro"
import type { FxProTableColumnType } from "@fx/pro"

Props

属性	类型	默认值	说明
columns	FxProTableColumnType[]	[]	列配置
data	Record<string, unknown>[]	[]	表格数据
loading	boolean	false	加载状态
stripe	boolean	true	斑马纹

其余 FxTable 的属性和事件通过 $attrs 直接透传（border / height / row-key / @selection-change / @sort-change 等，完整列表见 FxTable）。

FxProTableColumnType

属性	类型	说明
type	'selection' | 'index' | 'expand'	特殊列类型
prop	string	字段名
label	string	列标题
width / minWidth	string | number	列宽
fixed	boolean | 'left' | 'right'	固定列
align	'left' | 'center' | 'right'	对齐
sortable	boolean | 'custom'	是否可排序
showOverflowTooltip	boolean	溢出时显示 tooltip
slot	string	自定义内容插槽名
headerSlot	string	自定义表头插槽名
hidden	boolean	是否隐藏该列

同时支持 FxTableColumn 的所有其他属性。

插槽

插槽名	说明
default	默认插槽，支持混用 columns + FxTableColumn
列的 slot 值	自定义列内容，参数 { row, column, $index }
列的 headerSlot 值	自定义列标题，参数 { column, $index }
expand	展开行内容（type: 'expand' 时），参数 { row }

Methods

通过 ref 调用，内部暴露 FxTable 实例：

const tableRef = ref()
tableRef.value.ref // FxTable 实例（可调用 clearSelection / toggleRowSelection 等）