Table 表格

组件类型

基础表格

在 Stackblitz 中打开

横向平铺可滚动表格

在 Stackblitz 中打开

带斑马纹表格样式

在 Stackblitz 中打开

带边框表格样式

在 Stackblitz 中打开

BaseTable Props

名称类型默认值描述必传
borderedBooleanfalse是否显示表格边框N
cellEmptyContentString / Slot / Function-单元格数据为空时呈现的内容。TS 类型:string \| TNode<BaseTableCellParams<T>>通用类型定义N
columnsArray[]列配置,泛型 T 指表格数据类型。TS 类型:Array<BaseTableCol<T>>N
dataArray[]数据源,泛型 T 指表格数据类型。TS 类型:Array<T>N
emptyString / Slot / Function''空表格呈现样式,支持全局配置 GlobalConfigProvider。TS 类型:string \| TNode通用类型定义N
fixedRowsArray-1.9.3。固定行(冻结行),示例:[M, N],表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时,表示不冻结行。TS 类型:Array<number>N
heightString / Number-表格高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px。如果不是绝对固定表格高度,建议使用 maxHeightN
loadingBoolean / Slot / Functionundefined加载中状态。值为 true 会显示默认加载中样式,可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 false 则会取消加载状态。TS 类型:boolean \| TNode通用类型定义N
loadingPropsObject-透传加载组件全部属性。TS 类型:Partial<LoadingProps>Loading API Documents详细类型定义N
maxHeightString / Number-表格最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 pxN
rowAttributesObject / Array / Function-1.9.3。HTML 标签 tr 的属性。类型为 Function 时,参数说明:params.row 表示行数据;params.rowIndex 表示行下标;params.type=body 表示属性作用于 tbody 中的元素;params.type=foot 表示属性作用于 tfoot 中的元素。
示例一:{ draggable: true },
示例二:[{ draggable: true }, { title: '超出省略显示' }]。
示例三:() => [{ draggable: true }]。TS 类型:TableRowAttributes<T> type TableRowAttributes<T> = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array<TableRowAttributes<T>>通用类型定义详细类型定义
N
rowClassNameString / Object / Array / Function-1.9.3。行类名,泛型 T 指表格数据类型。params.row 表示行数据;params.rowIndex 表示行下标;params.type=body 表示类名作用于 tbody 中的元素;params.type= tfoot 表示类名作用于 tfoot 中的元素。TS 类型:ClassName \| ((params: RowClassNameParams<T>) => ClassName) interface RowClassNameParams<T> { row: T; rowIndex: number; rowKey?: string; type?: 'body' \| 'foot' }通用类型定义详细类型定义N
rowKeyString'id'必需。唯一标识一行数据的字段名,来源于 data 中的字段。如果是字段嵌套多层,可以设置形如 item.a.id 的方法Y
showHeaderBooleantrue是否显示表头N
stripeBooleanfalse是否显示斑马纹N
tableContentWidthString-表格内容的总宽度,注意不是表格可见宽度。主要应用于 table-layout: auto 模式下的固定列显示。tableContentWidth 内容宽度的值必须大于表格可见宽度N
tableLayoutStringfixed表格布局方式。可选项:auto/fixedN
verticalAlignStringmiddle行内容上下方向对齐。可选项:top/middle/bottomN
onCellClickFunctionTS 类型:(context: BaseTableCellEventContext<T>) => void
单元格点击时触发。详细类型定义
interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }
N
onRowClickFunctionTS 类型:(context: RowEventContext<T>) => void
行点击时触发,泛型 T 指表格数据类型。详细类型定义
interface RowEventContext<T> { row: T; index: number; e: MouseEvent }
N
onScrollFunctionTS 类型:(params: { e: Event }) => void
表格内容滚动时触发
N

BaseTable Events

名称参数描述
cell-click(context: BaseTableCellEventContext<T>)单元格点击时触发。详细类型定义
interface BaseTableCellEventContext<T> { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }
row-click(context: RowEventContext<T>)行点击时触发,泛型 T 指表格数据类型。详细类型定义
interface RowEventContext<T> { row: T; index: number; e: MouseEvent }
scroll(params: { e: Event })表格内容滚动时触发

BaseTableInstanceFunctions 组件实例方法

名称参数返回值描述
refreshTable--必需。全部重新渲染表格

BaseTableCol

名称类型默认值描述必传
alignStringleft列横向对齐方式。可选项:left/right/centerN
cellString / Function-自定义单元格渲染。值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染,插槽名称为 cell 的值。默认使用 colKey 作为插槽名称。优先级高于 render。泛型 T 指表格数据类型。TS 类型:string \| TNode<BaseTableCellParams<T>> interface BaseTableCellParams<T> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }通用类型定义详细类型定义N
classNameString / Object / Array / Function-列类名,值类型是 Function 使用返回值作为列类名;值类型不为 Function 时,值用于整列类名(含表头)。泛型 T 指表格数据类型。TS 类型:TableColumnClassName<T> \| TableColumnClassName<T>[] type TableColumnClassName<T> = ClassName \| ((context: CellData<T>) => ClassName) interface CellData<T> extends BaseTableCellParams<T> { type: 'th' \| 'td' }通用类型定义详细类型定义N
colKeyString-渲染列所需字段,值为 serial-number 表示当前列为「序号」列N
ellipsisBoolean / Object / Slot / Functionfalse单元格和表头内容超出时,是否显示省略号。如果仅希望单元格超出省略,可设置 ellipsisTitle = false
值为 true,则超出省略浮层默认显示单元格内容;
值类型为 Function 则自定义超出省略浮中层显示的内容。
请注意单元格超出省略的两个基本点:1. 内容元素是内联元素或样式(自定义单元格内容时需特别注意);2. 内容超出父元素。TS 类型:boolean \| TNode<BaseTableCellParams<T>>通用类型定义
N
ellipsisTitleBoolean / Object / Slot / Function-表头内容超出时,是否显示省略号。优先级高于 ellipsis
值为 true,则超出省略的浮层默认显示表头全部内容;
值类型为 Function 用于自定义超出省略浮层显示的表头内容。TS 类型:boolean \| TNode<BaseTableColParams<T>> interface BaseTableColParams<T> { col: BaseTableCol<T>; colIndex: number }通用类型定义详细类型定义
N
fixedStringleft1.9.3。固定列显示位置。可选项:left/rightN
minWidthString / Number-透传 CSS 属性 min-width<col> 元素。⚠️ 仅少部分浏览器支持,如:使用 TablesNG 渲染的 Chrome 浏览器支持 minWidthN
titleString / Function-自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染,插槽名称为 title 的值。优先级高于 render。TS 类型:string \| TNode<{ col: BaseTableCol; colIndex: number }>通用类型定义N
widthString / Number-列宽,可以作为最小宽度使用。当列宽总和小于 table 元素时,浏览器根据宽度设置情况自动分配宽度;当列宽总和大于 table 元素,表现为定宽。可以同时调整 table 元素的宽度来达到自己想要的效果N