【API 探讨】Table 组件 #3137

anlyyao · 2024-09-10T08:54:39Z

anlyyao
Sep 10, 2024
Maintainer

预计API

BaseTable Props

名称	类型	默认值	描述	必传
style	Object	-	样式	N
custom-style	Object	-	样式，一般用于开启虚拟化组件节点场景	N
bordered	Boolean	false	是否显示表格边框	N
cell-empty-content	String / Slot	-	单元格数据为空时呈现的内容。通用类型定义	N
columns	Array	[]	列配置，泛型 T 指表格数据类型。TS 类型：`Array<BaseTableCol<T>>`	N
data	Array	[]	数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>`	N
empty	String / Slot	''	空表格呈现样式，支持全局配置 `GlobalConfigProvider`。通用类型定义	N
fixed-rows	Array	-	【开发中】固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>`	N
height	String / Number	-	表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight`	N
loading	Boolean / Slot	undefined	加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和插槽自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态。通用类型定义	N
loading-props	Object	-	透传加载组件全部属性。TS 类型：`Partial<LoadingProps>`，Loading API Documents。详细类型定义	N
max-height	String / Number	-	表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px	N
row-key	String	'id'	必需。唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法	Y
show-header	Boolean	true	是否显示表头	N
stripe	Boolean	false	是否显示斑马纹	N
table-content-width	String	-	表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度	N
table-layout	String	fixed	表格布局方式。可选项：auto/fixed	N
vertical-align	String	middle	行内容上下方向对齐。可选项：top/middle/bottom	N

BaseTable Events

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

BaseTableCol

名称	类型	默认值	描述	必传
align	String	left	列横向对齐方式。可选项：left/right/center	N
class-name	String / Array	-	列类名，值用于整列类名（含表头）	N
col-key	String	-	渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列	N
ellipsis	Boolean	false	单元格和表头内容超出时，是否显示省略号。如果仅希望单元格超出省略，可设置 `ellipsisTitle = false`。值为 `true`，则超出省略浮层默认显示单元格内容	N
ellipsis-title	Boolean / Slot	undefined	表头内容超出时，是否显示省略号。优先级高于 `ellipsis`。值为 `true`，则超出省略的浮层默认显示表头全部内容	N
fixed	String	left	固定列显示位置。可选项：left/right	N
min-width	String / Number	-	透传 CSS 属性 `min-width` 到 `<col>` 元素	N
width	String / Number	-	列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果	N