vue3中 elementplus中tabs怎么在el-tabs-pane的label中添加icon图标
时间: 2023-11-27 10:53:42 浏览: 38
在 Vue3 中使用 Element Plus 中的 Tabs,可以在 `el-tabs-pane` 的 `label` 中添加 icon 图标,具体步骤如下:
1. 在 `el-tabs-pane` 标签中添加 `icon` 属性,并设置为需要展示的 icon 类名,例如:
```html
<el-tab-pane label="Tab 1" icon="el-icon-user"></el-tab-pane>
```
这样就可以在 `Tab 1` 标签上展示 `el-icon-user` 这个 icon。
2. 如果需要在 icon 与 label 之间添加间距,可以通过 CSS 设置 `el-tabs__item` 的 padding,例如:
```css
.el-tabs__item {
padding: 0 10px;
}
```
这样就可以在 icon 与 label 之间添加 10px 的间距。
完整代码示例:
```html
<template>
<el-tabs>
<el-tab-pane label="Tab 1" icon="el-icon-user">Content of Tab Pane 1</el-tab-pane>
<el-tab-pane label="Tab 2" icon="el-icon-message">Content of Tab Pane 2</el-tab-pane>
<el-tab-pane label="Tab 3" icon="el-icon-setting">Content of Tab Pane 3</el-tab-pane>
</el-tabs>
</template>
<style>
.el-tabs__item {
padding: 0 10px;
}
</style>
```