el-tabs 为每个选项添加一个对应的svg图标

• Z时代
• 2024-01-10
• 分类：技术分享

要从这样

变成这样

<div class="platformUser-container">
<el-tabs v-model="platformName" tab-position="left" class="tab-item" @tab-click="handleClick">
<el-tab-pane label="账号管理" name="accountmanagement">
<account-management ref="accountmanagement" />
</el-tab-pane>
<el-tab-pane label="功能权限" name="functionalauthority">
<functional-authority ref="functionalauthority" />
</el-tab-pane>
<el-tab-pane label="失效员工管理" name="disablelist">
<disable-list ref="disablelist" />
</el-tab-pane>
<el-tab-pane label="资源管理" name="resourcemanagement">
<resource-management ref="resourcemanagement" />
</el-tab-pane>
<el-tab-pane label="菜单管理" name="menumanagement">
<menu-management ref="menumanagement" />
</el-tab-pane>
</el-tabs>
</div>

回答

官方有例子的, 用名为 label 的 slot

见文档, 自定义标签页
https://element.eleme.cn/#/zh-CN/component/tabs#zi-ding-yi-biao-qian-ye

<el-tab-pane>
    <span slot="label"><i class="el-icon-date"></i>标签标题</span>
    内容内容内容....
</el-tab-pane>

插入label这个插槽就行

你如果要引入外部svg图标的话，百度是个很好的工具，可以参考下这个：
https://blog.csdn.net/m0_47665999/article/details/106548210

但即使element-ui图标不够用的话，Iconfont也可以试试呀

以上是 el-tabs 为每个选项添加一个对应的svg图标 的全部内容， 来源链接： utcz.com/a/40502.html