vue3中 elementplus中tabs怎么在el-tabs-pane中添加icon图标
时间: 2023-11-27 12:53:41 浏览: 110
vue element项目引入icon图标的方法
在`el-tabs-pane`中添加图标可以使用`icon`属性。`icon`属性可以接受 Element Plus 中内置的图标名称或自定义 SVG、图片等图标。
以下是一个简单的例子,其中使用了 Element Plus 中的`el-icon-user`图标:
```html
<el-tabs v-model="activeTab">
<el-tab-pane label="Tab 1">
<el-button type="primary" icon="el-icon-user">User</el-button>
</el-tab-pane>
<el-tab-pane label="Tab 2">
<el-button type="primary" icon="el-icon-search">Search</el-button>
</el-tab-pane>
</el-tabs>
```
如果你想使用自定义图标,则可以使用`icon`属性来指定自定义图标的 URL。例如:
```html
<el-tabs v-model="activeTab">
<el-tab-pane label="Tab 1">
<el-button type="primary" :icon="customIconUrl">Custom Icon</el-button>
</el-tab-pane>
<el-tab-pane label="Tab 2">
<el-button type="primary" :icon="customIconUrl">Another Custom Icon</el-button>
</el-tab-pane>
</el-tabs>
```
其中,`customIconUrl` 是一个可以返回自定义图标 URL 的计算属性或 data 属性。
希望这可以帮助到你。
阅读全文