# 表格选择工具栏

## 使用方法

`TableSelectionToolbar` 是配合「勾选行」用的批量操作条。`useTableSelectionState` 返回两份东西，分别交给对应的使用者：`selectionConfig` 交给 `useTableSelection`，`selectionState` 交给这条工具栏。工具栏从这份状态里读条数，并负责清空全部选中的键，所以永远跟勾选框对得上。老写法传 `count` 并自己处理 `clear` 也照样能用。

自己的操作按钮放进 `start` 插槽，计数文字和清空按钮由工具栏负责，排在末端。这条本身不管表格布局，也不管吸顶：放在表格上方跟着正常流排，或者用 `class`、`style` 自己固定住。

```ts
import { TableSelectionToolbar } from '@astryx-vue/core/Table'
```

## 建议

| 建议 | 做法 |
| --- | --- |
| 推荐 | 直接把 `useTableSelectionState` 返回的 `selectionState` 传进来，选中数字和清空命令才会跟行勾选保持同步。 |
| 推荐 | 产品自己的操作放进 `start` 插槽，不要把它们编码成一串配置对象。 |
| 避免 | 通过 Table 插件或它的横向滚动容器把这个工具栏塞进去。 |

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `count` | `number` | `0` | 选中了几行。没给 `selection` 时用它。 |
| `selection` | `TableSelectionState` | — | `useTableSelectionState` 返回的 `selectionState`。给了就代替 `count`，并由它驱动清空命令。 |
| `label` | `string` | 内置文案 | 工具栏的无障碍名称。默认是 `Bulk actions`。 |
| `clearLabel` | `string` | 内置文案 | 清空整个选择的按钮文字。默认是 `Unselect All`。 |
| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | 工具栏高度档。清空按钮跟着它走。 |
| `variant` | `SectionVariant` | `'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` 插槽。