### 組件名`ele-toolbar`,v1.6.0 新增,高級表格的表頭工具欄使用的就是該組件,當然你也可以獨立使用此組件,使用方式:
```
<template>
<ele-toolbar title="我是標題">
<!-- 默認插槽添加左邊內容 -->
<a-button type="primary">添加</a-button>
<a-button type="danger">刪除</a-button>
<!-- action插槽添加右邊內容 -->
<template #action>
<a-space class="ele-tool">
<!-- 右側圖標按鈕 -->
<ele-tool-item title="我是按鈕" @click="alert('Hello')">
<plus-outlined />
</ele-tool-item>
</a-space>
</template>
</ele-toolbar>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
</script>
```
屬性列表:
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| title | 標題 | String | |
| subTitle | 二級標題 | String | |
| theme | 主題,可選'none'、'default' | String | 'none' |
主題設置為 'default' 會帶有背景色,并且右側的圖標按鈕帶有邊框。
ele-tool-item 組件也是 v1.6.0 新增,可以通過默認插槽加圖標,支持的事件有 click,支持的屬性有:
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| title | tooltip的title屬性 | String | |
| placement | tooltip的placement屬性 | String | |
| disabled | 是否禁用tooltip | Boolean | false |
對于 v1.6.0 之前的版本可以通過加 class 來實現與默認工具按鈕外觀一致的圖標按鈕:
```
<div class="ele-tool-item">
<a-tooltip title="我是按鈕">
<plus-outlined @click="alert('Hello')"/>
</a-tooltip>
</div>
```