el-tabs自定义按钮
时间: 2023-08-31 16:10:53 浏览: 116
手动动态改变el-tabs标签页顺序
el-tabs自定义按钮可以通过在el-tab-pane组件中添加一个拥有slot="label"属性的元素来实现。在标签页中,使用el-tab-pane组件,将需要自定义按钮的内容放在一个span元素中,并且在span元素上使用slot="label"属性。例如,可以使用以下代码实现el-tabs自定义按钮功能:
```
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
<el-tab-pane name="CustoBtn">
<span slot="label">
<el-link type="primary" :underline="false">自定义按钮</el-link>
</span>
</el-tab-pane>
</el-tabs>
```
在上述代码中,我们在el-tab-pane标签中添加了一个name="CustoBtn"的标签页,然后在该标签页中的span元素上使用了slot="label"属性,并在span元素中添加了一个el-link组件作为自定义按钮。用户可以根据自己的需求来修改自定义按钮的样式和功能。
<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [element-ui 中 el-tabs在el-tab-pane后加入按钮或自定义内容](https://blog.csdn.net/weixin_44740072/article/details/131091850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [ElementUI 之 el-tabs添加自定义按钮](https://blog.csdn.net/yangwqi/article/details/105529122)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文