Table 表格

:::tip Table 组件需要配合 Column 组件使用。 :::

示例

可选的 ui 尺寸属性值：compact/loose。

允许自定义唯一键、设定选择模式以及进行排序。

允许启用内部滚动模式，以达到固定表头表底的效果。

使用 Table 的 scroll 属性及 Column 组件的 fixed 属性来控制固定列的位置。

支持将带有子数据的行进行展开。

名称	类型	默认值	描述
`ui`	`string=`	-	[^ui]
`data`	`Array<Object>`	-	表格数据。
`key-field`	`string`	-	用于指定充当表格数据的键的列标志符。值对应 `data` 属性中数据项的某个字段名称。对应字段的值则会作为行元素的 `key` 属性输出。当 `selectable` 属性为 `true` 时，也可以用来指定在存在纵向合并单元格的情况下以哪一列的不同行作为选择项，此时值必须来自内部某个 `Column` 组件的 `field` 属性。
`selectable`	`boolean`	`false`	是否支持表格行的选择。
`select-mode`	`string`	`'multiple'`	选择模式，支持的值为 `single`/`multiple`，分别对应于单选/多选模式。
`selected`	`Array<*>	*`	`[]`
`expandable`	`boolean`	`false`	是否允许展开行。
`expanded`	`Array<*>`	`[]`	[^expanded]
`order`	`string	boolean`	`false`
`order-by`	`string`	-	用于指定当前基于哪一列进行了排序，值必须来自内部某个 `Column` 组件的 `field` 属性。
`scroll`	`number`	-	指定滚动区域的最大高度，当超出此高度时，表格将进入固定表头和底部只允许数据区域滚动的模式。
`loading`	`boolean`	`false`	指定表格是否处于加载状态。

^^^ui 预设样式。

+++枚举值

^^^selected :::badges .sync :::

已选行。当 select-mode 为 'multiple' 时为已选行 key-field 对应字段值的数组；为 'single' 时为已选行 key-field 对应字段值。 ^^^

^^^expanded :::badges .sync :::

已展开行。为已展开行 key-field 对应字段值的数组。 ^^^

名称	描述
`default`	用于定义表格列，只能包含 `Column` 组件。
`no-data`	用于定义无数据时要展现的内容。
`foot`	表格脚部内容，整个区域将打通成为一个容器，不再保留分列。
`sub-row`	[^scoped-slot-sub-row]

^^^scoped-slot-sub-row 展开行后子行的内容。使用此插槽时，内容会作为行展开下方通栏显式的子行内容。使用此插槽时会覆盖 Column 的插槽 sub-row 内容。

作用域参数为 data 内当前行数据中的所有字段，以及当前行对应索引值 index。 ^^^

名称	描述
`select`	[^event-select]
`sort`	[^event-sort]

^^^event-select 切换已选项时触发。回调参数为 (selected, item, selectedItems)。

+++参数详情

名称	类型	描述
`selected`	`boolean`	`true` 表示已选择，`false` 则表示取消选择。
`item`	`Object`	选择状态发生变化的 `data` 属性中的数据项。当存在纵向合并单元格且以相应行作为键进行选择时，将返回第一条相关的 `data` 数据项。
`selectedItems`	`Object<string, Object	Array>`
+++
^^^

^^^event-sort 进行排序时触发的事件。回调参数为 (field, order)。

+++参数详情

名称	类型	描述
`field`	`string`	基于哪一列进行排序。值来自对应 `Column` 组件的 `field` 属性。
`order`	`string	boolean`
+++
^^^