表格
@astryxdesign/core v0.7.1 · Table
属性
Table
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | T[] | - | 行数据。不传时,用默认插槽自己拼表格。 |
columns | TableColumn<T>[] | - | key、header、width、align、verticalAlign、sortable、filter 和 renderCell。 |
idKey | string | (row: T) => string | 'id' | 行身份。分组行要用函数,才能认出合成出来的表头。 |
density | 'compact' | 'balanced' | 'spacious' | 'balanced' | 单元格内边距。紧凑 4×8,适中 8×12,宽松 12×16。 |
dividers | 'rows' | 'columns' | 'grid' | 'none' | 'rows' | 表头始终有底边。表体最后一行不再画行线。 |
isStriped | boolean | false | 偶数行使用淡底。 |
hasHover | boolean | false | 悬停填色,只在指针能悬停时出现。 |
verticalAlign | 'top' | 'middle' | 'bottom' | 'middle' | 默认垂直对齐。列上可以单独覆盖。 |
textOverflow | 'wrap' | 'truncate' | 'wrap' | 文字换行,或截成一行。 |
plugins | Record<string, TablePlugin<T>> | - | 排序、选择、分页、列设置、拖宽度、过滤、分组、树、展开、固定列、行状态和行号。 |
label | string | 本地化的「表格」 | 表格的无障碍名称。 |
rowIndexStart | number | 1 | 当前窗口第一行在整表里的位置。和总行数只要设置一个,数据行就会带上行号。 |
rowCount | number | - | 整表有多少行。只设置起点时,总行数按未知处理。 |
useTableGroupedRows
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | T[] | 必需 | 已经过滤、排序、分页之后的行。 |
groupBy | (item: T) => string | 必需 | 这一行属于哪一组。 |
collapsedGroups | Set<string> | 必需 | 当前折叠的组。切换时换成新集合。 |
onToggleGroup | (groupKey: string) => void | 必需 | 点表头或箭头时调用。 |
renderGroupHeader | (key, count, collapsed) => VNodeChild | 组名和数量 | 箭头右边的内容。 |
getRowKey | (item: T) => string | 按位置 | 真实行的稳定身份。 |
groupOrder | string[] | 首次出现的顺序 | 写在前面的组先出现。 |
useTableTreeState
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | T[] | 必需 | 带子节点的树。 |
idKey | string | (item) => string | 必需 | 节点身份。用来记住展开状态,也用来跳过环。 |
childrenKey | string | children | 子节点放在哪个字段。 |
expandedIds | Set<string> | - | 受控的展开集合。不传则组件自己记。 |
defaultExpandedIds | Iterable<string> | 空 | 一开始展开哪些节点。 |
onExpandedIdsChange | (ids) => void | - | 展开集合变化时调用。 |
hasExpandAllControl | boolean | false | 在树那一列表头放全部展开按钮。 |
hasRowClickExpansion | boolean | false | 点有子节点的行也能展开。点到按钮、链接或选中的文字时不动。 |
indent | 'sm' | 'md' | 'lg' | md | 每一层往里缩多少。 |
treeColumnKey | string | 第一个普通列 | 缩进和箭头画在哪一列。 |
sortSiblings | (siblings: T[]) => T[] | - | 同一层怎么排序。 |
useTableRowExpansion
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
expandedKeys | Set<string> | 必需 | 当前展开的行。由调用方保存。 |
onToggle | (key: string) => void | 必需 | 箭头、行点击或右键时调用。 |
getRowKey | (item: T) => string | 必需 | 行身份。 |
renderExpanded | (item: T) => VNodeChild | 必需 | 详情内容。它从第一列开始,不从箭头下面开始。 |
getIsItemExpandable | (item: T) => boolean | 全部可以 | 哪些行可以展开。 |
panelVariant | 'muted' | 'transparent' | transparent | 详情的底。透明时接着表格自己的表面,淡底用来和数据行分开。 |
hasRowClickExpansion | boolean | false | 点行也能展开。点到控件或选中的文字时不动。 |
useTableStickyColumns
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
startKeys | string[] | 空 | 钉住从第一列到这里列出的最后一列。 |
endKeys | string[] | 空 | 钉住从这里列出的第一列到表格末尾。 |
useTableRowStatus
getStatus 返回 null 时这一格是空的。语义状态用成功、警告或错误图标。自定义状态给一个颜色;有图标就画图标,没有就画一个圆点。说明会进提示,也会读给辅助技术。
useTableRowIndex
data 是表格正在画的行,分组之后的那一份。startFrom 默认从 1 开始。getRowKey 用来认出同一行;不传就按对象本身比较。label 是这一列表头,默认是一个井号。
proportional(value) 分剩余宽度,默认最小 120px。没写宽度的列是弹性列,下限 60px。pixel(value) 同时设定宽度和最小宽度。
TableSelectionToolbar
count 是选中的行数。clear 事件让调用方清掉选择。默认插槽放批量操作。数量、清除文案和区域名称来自表格的文案。
主题
表头用标签字号、半粗字重和次要文字色。表体用正文字号。选中行用强调色的淡底。斑马纹用淡底。悬停用悬停遮罩。放进卡片时,滚动区域会用卡片公布的容器内边距,让首尾单元格和标题对齐。