多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### 组件名`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> ```