作用域插槽是实现Tab页签标题动态图标的最直接方式，核心是将图标逻辑解耦至父级，由数据控制图标、高亮、禁用等状态；仅el-tabs支持#tab作用域插槽，需通过其插槽及作用域参数（如name、activeName）动态渲染图标并响应状态。
作用域插槽是实现 Tab 页签标题动态图标最直接、最可控的方式，核心在于把图标逻辑从组件内部解耦到父级，由数据决定显示什么图标、是否高亮、是否禁用等状态。
明确插槽归属：只有 el-tabs 支持 #tab 作用域插槽
很多人误以为 el-tab-pane 能单独定义标签头，其实不然。Element Plus 的设计约定是：所有页签头部渲染都由 <el-tabs> 统一接管，el-tab-pane 只负责内容区。因此，动态图标必须写在 <el-tabs> 的 #tab 插槽里，并通过作用域参数获取当前 tab 的上下文（如 name、title、disabled）。
绑定图标数据：用数组驱动多 tab 的差异化图标
不推荐硬编码每个 tab 的图标，而是把图标配置作为数据管理。例如：
- 定义 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" /></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 渲染。名称拼写错误或未注册会导致图标空白，这类问题常被忽略。
