Skip to content

表格

@astryxdesign/core v0.7.1 · Table

属性 ​

Table ​

名称类型默认值说明
dataT[]-行数据。不传时,用默认插槽自己拼表格。
columnsTableColumn<T>[]-key、header、width、align、verticalAlign、sortable、filter 和 renderCell。
idKeystring | (row: T) => string'id'行身份。分组行要用函数,才能认出合成出来的表头。
density'compact' | 'balanced' | 'spacious''balanced'单元格内边距。紧凑 4×8,适中 8×12,宽松 12×16。
dividers'rows' | 'columns' | 'grid' | 'none''rows'表头始终有底边。表体最后一行不再画行线。
isStripedbooleanfalse偶数行使用淡底。
hasHoverbooleanfalse悬停填色,只在指针能悬停时出现。
verticalAlign'top' | 'middle' | 'bottom''middle'默认垂直对齐。列上可以单独覆盖。
textOverflow'wrap' | 'truncate''wrap'文字换行,或截成一行。
pluginsRecord<string, TablePlugin<T>>-排序、选择、分页、列设置、拖宽度、过滤、分组、树、展开、固定列、行状态和行号。
labelstring本地化的「表格」表格的无障碍名称。
rowIndexStartnumber1当前窗口第一行在整表里的位置。和总行数只要设置一个,数据行就会带上行号。
rowCountnumber-整表有多少行。只设置起点时,总行数按未知处理。

useTableGroupedRows ​

名称类型默认值说明
dataT[]必需已经过滤、排序、分页之后的行。
groupBy(item: T) => string必需这一行属于哪一组。
collapsedGroupsSet<string>必需当前折叠的组。切换时换成新集合。
onToggleGroup(groupKey: string) => void必需点表头或箭头时调用。
renderGroupHeader(key, count, collapsed) => VNodeChild组名和数量箭头右边的内容。
getRowKey(item: T) => string按位置真实行的稳定身份。
groupOrderstring[]首次出现的顺序写在前面的组先出现。

useTableTreeState ​

名称类型默认值说明
dataT[]必需带子节点的树。
idKeystring | (item) => string必需节点身份。用来记住展开状态,也用来跳过环。
childrenKeystringchildren子节点放在哪个字段。
expandedIdsSet<string>-受控的展开集合。不传则组件自己记。
defaultExpandedIdsIterable<string>空一开始展开哪些节点。
onExpandedIdsChange(ids) => void-展开集合变化时调用。
hasExpandAllControlbooleanfalse在树那一列表头放全部展开按钮。
hasRowClickExpansionbooleanfalse点有子节点的行也能展开。点到按钮、链接或选中的文字时不动。
indent'sm' | 'md' | 'lg'md每一层往里缩多少。
treeColumnKeystring第一个普通列缩进和箭头画在哪一列。
sortSiblings(siblings: T[]) => T[]-同一层怎么排序。

useTableRowExpansion ​

名称类型默认值说明
expandedKeysSet<string>必需当前展开的行。由调用方保存。
onToggle(key: string) => void必需箭头、行点击或右键时调用。
getRowKey(item: T) => string必需行身份。
renderExpanded(item: T) => VNodeChild必需详情内容。它从第一列开始,不从箭头下面开始。
getIsItemExpandable(item: T) => boolean全部可以哪些行可以展开。
panelVariant'muted' | 'transparent'transparent详情的底。透明时接着表格自己的表面,淡底用来和数据行分开。
hasRowClickExpansionbooleanfalse点行也能展开。点到控件或选中的文字时不动。

useTableStickyColumns ​

名称类型默认值说明
startKeysstring[]空钉住从第一列到这里列出的最后一列。
endKeysstring[]空钉住从这里列出的第一列到表格末尾。

useTableRowStatus ​

getStatus 返回 null 时这一格是空的。语义状态用成功、警告或错误图标。自定义状态给一个颜色;有图标就画图标,没有就画一个圆点。说明会进提示,也会读给辅助技术。

useTableRowIndex ​

data 是表格正在画的行,分组之后的那一份。startFrom 默认从 1 开始。getRowKey 用来认出同一行;不传就按对象本身比较。label 是这一列表头,默认是一个井号。

proportional(value) 分剩余宽度,默认最小 120px。没写宽度的列是弹性列,下限 60px。pixel(value) 同时设定宽度和最小宽度。

TableSelectionToolbar ​

count 是选中的行数。clear 事件让调用方清掉选择。默认插槽放批量操作。数量、清除文案和区域名称来自表格的文案。

主题 ​

表头用标签字号、半粗字重和次要文字色。表体用正文字号。选中行用强调色的淡底。斑马纹用淡底。悬停用悬停遮罩。放进卡片时,滚动区域会用卡片公布的容器内边距,让首尾单元格和标题对齐。