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

Question

要从这样

变成这样

<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>

Answer 1

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

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

Answer 2

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

插入label这个插槽就行

Answer 3

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

---

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