TableColumn 表格列

基于 Element Plus ElTableColumn 的轻量封装，用于配合 MtTable 声明列配置，并透传 Element Plus 表格列能力。

示例

基础用法

自定义单元格

自定义表头

API

Props

Props 直接透传 Element Plus ElTableColumn，常用列属性如下：

属性名	说明	类型	默认值
type	列类型	'selection' | 'index' | 'expand'	-
index	索引列的起始值或自定义索引函数	number | ((index: number) => number)	-
label	表头显示文本	string	-
column-key	column 的 key，用于筛选、排序等场景	string	-
prop	对应行数据字段名	string	-
width	列宽	string | number	-
min-width	最小列宽	string | number	-
fixed	固定列位置	boolean | 'left' | 'right'	false
render-header	自定义表头渲染函数	(data: { column: unknown, $index: number }) => VNode | string	-
sortable	是否可排序，设置为 custom 时使用远程排序	boolean | 'custom'	false
sort-method	本地排序方法	(a: unknown, b: unknown) => number	-
sort-by	指定排序字段或排序取值方法	string | string[] | ((row: unknown, index: number) => string)	-
sort-orders	排序切换顺序	Array<'ascending' | 'descending' | null>	['ascending', 'descending', null]
resizable	是否允许拖拽调整列宽	boolean	true
formatter	单元格内容格式化函数	(row: unknown, column: unknown, cellValue: unknown, index: number) => VNode | string	-
show-overflow-tooltip	内容过长时是否显示 tooltip	boolean | object	-
align	单元格对齐方式	'left' | 'center' | 'right'	'left'
header-align	表头对齐方式，未设置时跟随 align	'left' | 'center' | 'right'	-
class-name	列单元格类名	string	-
label-class-name	当前列表头类名	string	-
selectable	仅 selection 列可用，控制某一行是否可选	(row: unknown, index: number) => boolean	-
reserve-selection	仅 selection 列可用，数据刷新后是否保留选中项	boolean	false
filters	数据过滤选项	Array<{ text: string, value: unknown }>	-
filter-placement	过滤弹出层位置	string	-
filter-class-name	过滤弹出层类名	string	-
filter-multiple	数据过滤是否支持多选	boolean	true
filter-method	数据过滤方法	(value: unknown, row: unknown, column: unknown) => boolean	-
filtered-value	当前选中的过滤值	unknown[]	-

Events

MtTableColumn 和 Element Plus ElTableColumn 都不是事件型组件，列交互通常由外层 MtTable / ElTable 统一抛出事件，例如排序、筛选、选择变化等。列级能力主要通过上方 Props 中的回调函数实现：

能力	使用方式	说明
自定义表头渲染	render-header	返回自定义表头内容
自定义单元格格式	formatter	返回格式化后的单元格内容
本地排序	sort-method	配合 sortable 控制本地排序逻辑
排序取值	sort-by	指定用于排序的字段或取值函数
选择禁用	selectable	控制 selection 列中某一行是否可选
本地过滤	filter-method	配合 filters 控制本地过滤逻辑

Slots

插槽名	说明	作用域参数
default	自定义单元格内容	Element Plus TableColumn 默认插槽作用域
header	自定义表头内容	Element Plus TableColumn header 插槽作用域

注意事项

• Props 与事件透传给 ElTableColumn，具体能力以 Element Plus ElTableColumn 为准。
• default 插槽用于自定义单元格内容，常用作用域参数包含 row、column、$index 等。
• 当同时需要自定义表头和单元格时，建议直接使用 Element Plus ElTableColumn。
• 具体列配置能力以 Element Plus ElTableColumn 为准。
• MtTableColumn 必须放在 MtTable 内使用。