Skip to content

表格选择工具栏

@astryxdesign/core v0.7.1 · TableSelectionToolbar

属性 ​

属性类型默认值说明
countnumber0选中了几行。没给 selection 时用它。
selectionTableSelectionState—useTableSelectionState 返回的 selectionState。给了就代替 count,并由它驱动清空命令。
labelstring内置文案工具栏的无障碍名称。默认是 Bulk actions。
clearLabelstring内置文案清空整个选择的按钮文字。默认是 Unselect All。
size'sm' | 'md' | 'lg''sm'工具栏高度档。清空按钮跟着它走。
variantSectionVariant'muted'底色:section 用表面色,muted 用弱化底,transparent 不铺底。

事件 ​

  • clear():点击清空按钮时触发。传了 selection 时,组件自己先把选中的键清空,再发出这个事件。

插槽 ​

插槽插槽参数说明
start—产品自己的操作按钮,排在逻辑起点。里面的控件不会自动继承 size,需要自己设。
default—位置和 start 一样。留给旧代码;两个都给时以 start 为准。
label{ count: number }换掉可视的计数文字,用来做本地化或业务自己的说法。

原生属性 ​

根元素是一个带 role="toolbar" 和 aria-orientation="horizontal" 的 <div>。

以下内容落到根元素上:

  • HTML 属性。
  • aria-* 属性。
  • data-* 属性。
  • class。
  • style。
  • 原生事件监听器。

三句文案来自多语言消息:无障碍名称(Bulk actions)、计数文字({count} selected)和清空按钮文字(Unselect All)。调用 provideAstryxLocale('zh-CN') 后变成中文;label、clearLabel 和 label 插槽可以逐个替换它们。

传了 selection 且一个都没选中时,整条不渲染。用 count 的老写法始终渲染,固定条数的工具栏位置不会跳。

React 专有的两个属性不在 Vue 版里:xstyle 换成 class 或 style,工具栏的位置交给外层布局。renderSelectionLabel 和 startContent 换成了 label 和 start 插槽。