作用域插槽是实现tab页签标题动态图标的最直接方式，核心是将图标逻辑解耦至父级，由数据控制图标、高亮、禁用等状态；仅el-tabs支持#tab作用域插槽，需通过其插槽及作用域参数（如name、activename）动态渲染图标并响应状态。
作用域插槽是实现 Tab 页签标题动态图标最直接、最可控的方式，核心在于把图标逻辑从组件内部解耦到父级，由数据决定显示什么图标、是否高亮、是否禁用等状态。
明确插槽归属：只有 el-tabs 支持 #tab 作用域插槽
很多人误以为 el-tab-pane 能单独定义标签头，其实不然。Element Plus 的设计约定是：所有页签头部渲染都由 <el-tabs></el-tabs> 统一接管，el-tab-pane 只负责内容区。因此，动态图标必须写在 <el-tabs></el-tabs> 的 #tab 插槽里，并通过作用域参数获取当前 tab 的上下文（如 name、title、disabled）。
绑定图标数据：用数组驱动多 tab 的差异化图标
不推荐硬编码每个 tab 的图标，而是把图标配置作为数据管理。例如：
Prompt Log
下载
一款AI开发辅助工具，主要用于从 AI 编程会话日志（Clawdbot、Claude Code、Codex）中提取对话记录。该功能用于在用户要求导出提示词历史、会话日志或 `.jsonl` 格式的会话文件时使用，适合需要提升相关任务效率的用户。
- 定义 tab 列表：
tabs = [{ name: 'home', title: '首页', icon: 'HomeFilled', badge: 3 }, { name: 'cart', title: '购物车', icon: 'ShoppingCart', badge: 0 }] - 在
#tab插槽中根据name查找对应项：const item = tabs.find(t => t.name === name) - 再用
<el-icon><component :is="item.icon"></component></el-icon>渲染图标
结合状态做样式响应：激活态、禁用态、徽标联动
图标不是静态的，它需要随 tab 状态变化。利用作用域插槽传入的 activeName 和 disabled，可自然实现：
- 激活时换图标：
:is="activeName === name ? item.activeIcon || item.icon : item.icon" - 禁用时灰阶处理：
:style="{ filter: disabled ? 'grayscale(1)' : 'none' }" - 徽标右上角显示：
<el-badge :value="item.badge" class="tab-badge">...</el-badge>，配合 CSS 定位
避免常见陷阱：图标资源加载与命名一致性
动态图标依赖组件注册或自动导入。若使用 Element Plus 内置图标，确保已全局引入或按需导入对应图标组件；若用自定义 SVG，建议统一导出为命名组件（如 IconHome、IconCart），并在数据中存字符串名，再通过 component :is 渲染。名称拼写错误或未注册会导致图标空白，这类问题常被忽略。
